我如何獲得按鈕列表索引中的jQuery

有幾個按鈕我如何獲得按鈕列表索引中的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>

來源

2017-04-10 mosh442

我從來沒有見過[像你一樣]定義的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>

來源

2017-04-10 21:44:41 gavgrif

創建所有這些按鈕的集合來索引。需要注意的是是從零開始

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')); 
})

來源

2017-04-10 21:24:27 charlietfl

你是不是想要得到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>

來源

2017-04-10 21:30:27

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/

來源

2017-04-10 21:37:36 Howel

我如何獲得按鈕列表索引中的jQuery

回答

相關問題