如何使用jQuery唯一地识别具有相同id的类似动态元素 - How do I identify similar dynamic elements with same id uniquely with jQuery?

How do I identify similar dynamic elements with same id uniquely with jQuery?

所以我有这些元素，由PHP循环生成：

<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的切换程序。

现在，我想做的只是，当用户选中或取消选中其中一个时，通过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);
            }
        });

问题：如何唯一地识别每个元素，而不必具体命名每个元素？

感谢

您知道在单个文档中必须有一个唯一的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));
      }
  });
});

如果你想用一种简单的方法访问多个元素，他们应该使用一个通用的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" )

问题：如何在不需要的情况下唯一识别每个元素具体说出每一个名字？

正如在评论和答案中指出的，元素的id应该是唯一的。您可以从元素中删除id，并通过其data-id属性来标识每个元素，这些属性在Question的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`