Jquery - 一个简单的函数来处理被点击的16个不同的按钮？

我正在为一个网站创建一个交互式颜色取样器，该取样器有16种不同的色板可以单击显示全尺寸预览。Jquery - 一个简单的函数来处理被点击的16个不同的按钮？

使用jQuery我有一个功能show_preview(swatch_id)它做所有的好视觉的东西。然而调用该函数，我目前坚持重复16个类似的处理程序：

<div id="#swatch_clicker_1> 
<div id="#swatch_clicker_2> 


$("#swatch_clicker_1").click(function() 
{ 
    show_preview('1'); 
} 
$("#swatch_clicker_2").click(function() 
{ 
    show_preview('2'); 
} 
...

我一直在阅读轮主题，这里包括对堆栈溢出，并从另一个答案修改一些代码。所以如果我要做这样的事情，它是否仍然有效地运行（如果是的话）！

<div class="swatch_clicker" id="#swatch_clicker_1> 
<div class="swatch_clicker" id="#swatch_clicker_2> 


$(".swatch_clicker").click(function(event) 
{ 
    var clicker_id=event.target.id; 
    show_preview(clicker_id); 
}

感谢，

菲尔

来源

2011-11-17 Philip Jones

好吧，你几乎没错。

这是我会怎么做：

<div class="swatch_clicker" data-preview-number="1"></div> 
<div class="swatch_clicker" data-preview-number="2"></div> 

<script> 
    $(".swatch_clicker").click(function() { 
     show_preview($(this).data('preview-number')); 
    }); 
</script>

来源

2011-11-17 17:09:46 simshaun

据我所知，数据属性只是在HTML 5中形式化。这种方法会导致与那些有旧浏览器的人有问题吗？ –

哦，是的......非常感谢你的帮助。 –

不，不会造成问题。实际上，你甚至不必为这些使用html5规范。你可以简单地调用这些属性“preview-number”和jQuery（尽管我不认为普通的JS）仍然可以访问它。但是，如果你非常关心有效的HTML，那么simshaun确实犯了一个错误。连字符只能在“数据”一词之后使用。其余的应该用下划线（并且没有CamelCasing！）。 – maxedison

不完全是，因为event.target.id将会像 'swatch_clicker_1'。这将工作，虽然：

$(".swatch_clicker").click(function() 
{ 
    var arr = this.id.split('_'); //returns an array like ['swatch','clicker',1] 
    show_preview(arr[arr.length - 1]); //the final item in the array is the number you want 
}

注意，在这种情况下使用的event.target是没有必要的。 this会给你这个目标。

最后，你不应该在你的html中包含#这个id。

来源

2011-11-17 17:09:27 maxedison

感谢您的帮助。我怎么能让'＃'滑入我的html？ –

这将运行一样好，虽然你可能需要从ID解析出号码。

来源

2011-11-17 17:09:58 SLaks

Jquery - 一个简单的函数来处理被点击的16个不同的按钮？

回答

相关问题