我如何获得按钮列表索引中的jQuery

问题描述：

<button id="btn-ok[1]" class="btn-ok"></button> 
<button id="btn-failed[1]" class="btn-failed"></button> 

<button id="btn-ok[2]" class="btn-ok"></button> 
<button id="btn-failed[2]" class="btn-failed"></button> 

<button id="btn-ok[3]" class="btn-ok"></button> 
<button id="btn-failed[3]" class="btn-failed"></button>

和我正在不同的充jQuery的功能BTN-OK和BTN-失败。我想使用id的索引号。我如何获得它？

<script> 
    $(document).ready(function() { 
     $('#btn-ok').click(function() { 
      console.log('I would like to print the index of the pressed button here. (i.e. 1,2,3)'); 
     }); 
    }); 

</script>

我从来没有见过[像你一样]定义的CSS标签，这似乎是错误这么多层次。你应该改为绑定类名的事件。除此之外，这似乎是一个设计错误，你不应该需要索引等。为什么你需要索引呢？ –

我需要索引，因为我需要根据按钮执行不同的调用。把[]当成是处理这种情况的尝试。但正如我在评论中看到的那样，这显然是一个糟糕的主意。谢谢您的回答。 – mosh442

答

使用HTML5的数据属性，并将索引和状态分离为单独的元素 - 我添加了一些teext给每个按钮，所以它可以b易于看到，然后单击抓取数据属性和console.logs的值。

$(document).ready(function() { 
 
    $('.btn').click(function() { 
 
    var index = $(this).data('index'); 
 
    var status = $(this).data('status') 
 
    
 
    console.log(index + '/' + status); 
 
    }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<button data-index="1" data-status ="ok" class="btn btn-ok">1 Ok</button> 
 
<button data-index="1" data-status ="failed" class="btn btn-failed">1 Failed</button> 
 

 
<button data-index="2" data-status ="ok" class="btn btn-ok">2 OK</button> 
 
<button data-index="2" data-status ="failed" class="btn btn-failed">2 Failed</button> 
 

 
<button data-index="3" data-status ="ok" class="btn btn-ok">3 OK</button> 
 
<button data-index="3" data-status ="failed" class="btn btn-failed">3 Failed</button>

答

创建所有这些按钮的集合来索引。需要注意的是是从零开始

var $buttons = $('.btn-ok, btn-failed').click(function(){ 
    alert($buttons.index(this)); 
})

或者更多的特异性靶标：代替

var $buttons = $('.btn-ok, btn-failed'); 

$('#btn-ok\\[1\\]').click(function(){ 
    alert($buttons.index(this)); 
})

或者使用数据属性的ID

<button class="btn-ok" data-index="1"></button>

与[]乱搞的..

$('.btn-ok').click(function(){ 
    alert($(this).data('index')); 
})

答

你是不是想要得到id？

$("button").click(function(){ 
 
    alert($(this).attr('id')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btn-ok[1]" class="btn-ok">ok[1]</button> 
 
<button id="btn-failed[1]" class="btn-failed">failed[1]</button> 
 

 
<button id="btn-ok[2]" class="btn-ok">ok[2]</button> 
 
<button id="btn-failed[2]" class="btn-failed">failed[2]</button> 
 

 
<button id="btn-ok[3]" class="btn-ok">ok[3]</button> 
 
<button id="btn-failed[3]" class="btn-failed">failed[3]</button>

答

HTML的id不应该使用索引。而是使用一个类来保存选择和数据属性持有其他值，你需要这样的：

的HTML：

<button class="btn-ok" data-index="1">Ok</button>

的JS：

$('.btn-ok').click(function() { 
    $(this).data('index'); 
});

的小提琴： https://jsfiddle.net/kLvqe8dw/2/

我如何获得按钮列表索引中的jQuery

相关推荐