Question

所以我有这些元素，由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调用发送，以便在数据库中取消发布。

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

        });

问题：如何在不必具体命名每个元素的情况下唯一标识每个元素？

由于

Answer 1

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

});

Answer 2

如果您希望能够轻松访问多个元素，则应使用常用的 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" )

Answer 3

问题：如何在不必的情况下唯一标识每个元素具体命名？

正如评论和答案所指出的，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`

如何使用jQuery唯一标识具有相同ID的相似动态元素？

3 个答案: