如何使用jQuery唯一標識具有相同id的類似動態元素？

所以我有這些元素，由PHP循環產生：如何使用jQuery唯一標識具有相同id的類似動態元素？

<input id="toggler" data-toggle="toggle" data-id="1" data-size="small" data-on="Yes" data-off="No" type="checkbox" checked="checked"> 
<input id="toggler" data-toggle="toggle" data-id="2" data-size="small" data-on="Yes" data-off="No" type="checkbox" checked="checked"> 
<input id="toggler" data-toggle="toggle" data-id="3" data-size="small" data-on="Yes" data-off="No" type="checkbox" checked="checked">

這用了jQuery UI的toggler。

現在我想做的事，簡直是，當其中一人被選中或由用戶選中，通過Ajax調用發送取消發佈他們在DB。

var base = "http://whatever.com/"; 
var id = $(this).data(id); 
var formData = {id:id}; 

$.ajax({ 
     type: "POST", 
     url: base+'unpublish', 
     data: formData, 
     success: function(data) { 
     // data is ur summary 
       $('#result').html(data); 
      } 

     });

問題：如何唯一標識每個元素而不必具體指定每個元素？

感謝

來源

2016-04-03 Jacques

標識必須是唯一的。我在第3342次輸入此評論。 :) –

您的標記無效.. ** id必須是唯一的** –

如果你想有一個簡單的方法來訪問他們應該使用一個共同的CLASS沒有ID的多個元素。 ID在HTML文檔中必須是唯一的，因爲其他人提到您的HTML無效。

你可以做這樣的事情：

<input class="toggler" id="1" data-toggle="toggle" data-id="1" data-size="small" data-on="Yes" data-off="No" type="checkbox" checked="checked"> 
<input class="toggler" id="2" data-toggle="toggle" data-id="2" data-size="small" data-on="Yes" data-off="No" type="checkbox" checked="checked"> 
<input class="toggler" id="3" data-toggle="toggle" data-id="3" data-size="small" data-on="Yes" data-off="No" type="checkbox" checked="checked">

您可以通過引用類發現他們都在jQuery的：

$(".toggler")

來源

2016-04-03 15:02:08

這是解決方案的過於簡單化.OP然後需要訪問數據發送也。這裏沒有比評論中提到的更多的東西了 – charlietfl

你知道你必須有一個獨特id在單文件 - 從你的循環中刪除它們。

var base = "http://whatever.com/"; 

$('*[data-toggle="toggle"]').on('click', function(){ 

    var target = $(this), 
     action = (target.is(':checked') ? 'unpublish' : 'publish'), // get action type based on checkbox checked attribute. 
     id  = target.attr('data-id'); 

    $.ajax({ 
     type: "POST", 
     url: base+action, 
     data: {id:id}, 
     success: function(data) { 
      // data is ur summary 
      $('#result').html(data); 
      // update checked attribute. 
      (target.is(':checked') ? target.prop('checked',false) : target.prop('checked',true)); 
     } 
    }); 

});

來源

2016-04-03 15:06:29

問：我如何唯一標識每一個元素，而無需名各專門？

正如在評論和答案中指出的，id的元素應該是唯一的。您可以從元素中刪除id，並通過其data-id屬性標識每個元素，這些屬性在問題的html處是唯一的。

<input data-toggle="toggle" data-id="1" data-size="small" data-on="Yes" data-off="No" type="checkbox" checked="checked"> 
<input data-toggle="toggle" data-id="2" data-size="small" data-on="Yes" data-off="No" type="checkbox" checked="checked"> 
<input data-toggle="toggle" data-id="3" data-size="small" data-on="Yes" data-off="No" type="checkbox" checked="checked">

$("input[data-id=1]") // first `input` 
    $("input[data-id=2]") // second `input` 
    $("input[data-id=3]") // third `input`

來源

2016-04-03 15:07:47 guest271314

如何使用jQuery唯一標識具有相同id的類似動態元素？

回答

相關問題