我們可以使用javascript或jquery通過循環將屬性'id'設置為不同的'按鈕'嗎？

Question

我想實現以下目標：

假設我的頁面上有十個按鈕，它們都是動態生成的。 我已經為所有這十個按鈕添加了ID，比如id為1,2,3 .... 10。 使用以下代碼。

function createButton(id){
       button.setAttribute("name", id);
}

現在我想將“onlick”事件添加到所有這些按鈕，就像這樣

function abc()
      $(document).on('click','#1', function(){
      callSomeFunc();
});

這樣我就不得不用不同的Id編寫上述代碼10次。 我試圖在函數上使用循環

function abc()
   for(var i=1, i<=10, i++){
          $(document).on('click',id, function(){
          callSomeFunc(id);
   });
}

無濟於事！ 我怎樣才能做到這一點？

Answer 1

無需將click事件包裝在函數中。 您可以讓它聽取點擊事件。 由於每個id都調用相同的函數，因此可以通過className而不是特定的ID來概括它：

 $(document).on('click', 'div', function() {
   callSomeFunc();
 });

Codepen示例

要獲取id值，可以使用this.id ：

 $(document).on('click', 'div', function() {
    callSomeFunc(this.id)
 });

ID示例

Answer 2

您的功能的直接修復，堅持您嘗試的方式，是執行以下操作：

function abc()
   for(var i=1, i<=10, i++){
          $(document).on('click','#' + i, function(){
          id = $(this).prop('id');
          callSomeFunc(id);
   });
}

注意我明確地添加了'＃'，並且指的是你的索引計數器而不是intial選擇器中的'id'。

不過，我會推薦一些改進。 你總是可以避免$（文件）笨拙：

function abc()
   for(var i=1, i<=10, i++){
          $('#' + i).click(function(){
          id = $(this).prop('id');
          callSomeFunc(id);
   });
}

你有沒有理由使用ID？ 如果你設置了一個普通的課程，你可以一舉完成這一切！ 另外，如果您使用id為不同的按鈕提供不同的行為，您可以使用$（this）在事件處理程序中執行此操作

//This will apply the click handler to every element that has class="someClass"
$('.someClass').click(function(){
        //Do stuff with $($this)
});