Question

我有几个看起来像的按钮：

<span class="input-group-btn">
  <a class="btn btn-default" href="#">
    <i class="fa fa-barcode"></i> Scan
  </a>
</span>

但我需要能够检测到按下了多少个按钮。有什么方法可以用JQuery / JavaScript做到这一点吗？

按钮动态创建，如：

$('input[role="barcode"]').before('<span class="input-group-btn"><a class="btn btn-default" href="#"><i class="fa fa-barcode"></i> Scan</a></span>')

作为替代方案，是否可以为每个按钮提供不同的id或href，以便在创建时区分它们？

Answer 1

尝试$ .index（）;

OwnerDrawVariable

https://jsfiddle.net/7daffjh8/18/

Answer 2

$('input[role="barcode"]').each( function(index, elem) {
  $(this).before(
     '<span class="input-group-btn">'
    +  '<a class="btn btn-default" href="#" data-index="' + index + '">'
    +    '<i class="fa fa-barcode"></i> Scan'
    +  '</a>'
    + '</span>'
  );
});

$(document).on('click', 'a.btn', function () {
  console.log('You clicked on link with index', this.getAttribute("data-index"));
});

Answer 3

您可以检测在事件处理程序中单击了哪个按钮：

$('.input-group-btn').click(function(e){
    var index = $(e.target).index();
    console.log(index);
});

Answer 4

您可以使用其他描述的JQUERY方法OR

您可以在创建类似

时为自己提供手动编号

<span class="input-group-btn">
  <a class="btn btn-default" index="1" href="#">
    <i class="fa fa-barcode"></i> Scan
  </a>
</span>

或使用JS

for(i=0 to n){
  var l_button = document.createElement("Button");
  l_button.setAttribute("index",i);
}

当你想检索索引时，你可以这样做：

var target = event.target || event.srcElement;
var index_val = target.getAttribute("index");

JQuery / JavaScript检测按下的按钮索引

4 个答案: