Question

我想设置一个监听器来处理我知道可以完成的按钮点击：

$("#id").click(function() {...});

但我想知道是否有办法让它听取属性而不是ID。因为我想添加自定义属性，例如

<span class="btn btn-primary" button-type="css-change"></span>

我想做点什么

$(document).attr("button-type").equals("css-change").click(function () { ... } );

这是可能的吗？

Answer 1

使用attribute-equals selector [attribute='value']

＆＃13;

$("[button-type='css-change']").click(function() {
  alert("clicked");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<span class="btn btn-primary" button-type="css-change">hi</span>

＆＃13;

Answer 2

您可以使用attribute-equals选择器：

$("[button-type='css-change']")

您应该坚持使用data-*来获取自定义属性以通过验证。

$("[data-type='css-change']")

Answer 3

您可以使用属性选择器执行此操作。

http://api.jquery.com/category/selectors/

在你的情况下：

http://api.jquery.com/attribute-equals-selector/

Answer 4

是的，你可以遍历 .btn 类中的所有元素。

<span id="1" class="btn btn-primary" button-type="css-change"></span>
<span id="2" class="btn btn-primary" button-type="test"></span>

 <script>

 $(".btn").each(function()
 {
    if($(this).attr("button-type") == "css-change")
    {
        console.log("The winner is  "+$(this).attr("id"));
    }
 });

 </script>

或者还有一种更简单的方法..

$("[button-type='css-change']").each(function(index)
{
    $(this).html("hi");
}

onclick的jquery属性监听器

4 个答案: