使用带编号的 ID 简化选择器

Question

我在同一页面上有一系列 div，我为其附加了一个点击功能，它的作用类似于 <a> 标签，将用户引导至从自定义数据中提取的 URL -属性。我的HTML如下：

<div id="my-button1" class="button-style-1" data-href="http://www.whosebug.com">
  Button
</div>

<div id="my-button2" class="button-style-1" data-href="http://www.w3schools.com">
  Button 2
</div>

和jQuery：

$('#my-button1,#my-button2').click(function() {
    var dataURL = $(this).data('href');
    window.open(dataURL, '_blank');
  });

我的问题是，是否可以将选择器简化为：

$('#my-button[i]')

如果我在同一页面上包含许多这样的 div，它会更紧凑吗？如果可以，我该如何实现这个效果？

Answer 1

为什么不在每个按钮上都使用 class？然后 select class

$('.my-buttons').click(...)

Answer 2

您可以使用 $('div[data-href]')，它将应用于具有 data-href 属性的任何 div。

您的更新示例：https://jsfiddle.net/fLj7y0kz/1/

我已经完成并看到它完成的典型方法是按照@arop 的建议对这些元素使用特定的 class 并使用 class 选择器 $('div.myclass)` .

Answer 3

您可以使用 nth-child() 属性通过索引获取元素。看下面的示例代码 $('#my-button:nth-child (1)').click (function (){})

Answer 4

使用 loop.Hope 中的 ID 创建了动态 div，这对您有帮助

var mybutton = [];
var url = ["http://www.whosebug.com", 
           "http://www.w3schools.com",
           "http://www.w3schools.com/jquery", 
            "http://www.w3schools.com/css"];

for (i = 0; i < 4; i++) {
  //alert("hi");
  $("body").append("<div class='button-style-1' 
     id='mybutton[" + [i] +"]' data-href=" + url[i] + ">Button</div>")

}

codepen - http://codepen.io/nagasai/pen/xOVERN

使用带编号的 ID 简化选择器

Simplify selector with numbered IDs

jquery

jquery-selectors

custom-data-attribute