Question

我有一个函数可以创建和删除18个图像元素（＃scelta1，＃scelta2等）中的所有数据属性，每次用户单击其中一个图像时它都会运行：

$(document).ready(function () {
    $('#scelta6']").on("click", function() { 
    // For simplicity #scelta6,
    // the real function gets the id based on the element you click
    $('#scelta6'+).attr({'data-a': foo,
                        'data-b': bar,
                        [a lot of data-] });
    // All the variables is taken from the dropdowns choices of the user in a 
    // separate function
[do something]
    var conta = 1;
    var fiamma;
    while (conta < 19) {
        fiamma = $('#scelta'+conta);
        $.each($(fiamma).data(), function(i){ $(fiamma).removeAttr("data-" + i); });
        console.log(conta); // Just to know if the function is running 
        conta++;
    }
}

现在的问题是：在一个全新的加载页面上，如果我点击这些元素，上面的函数将运行没有任何问题，并从所有元素中删除所有数据属性。当我再次点击其中一个元素时，所有数据属性都保留在原位！为什么这个功能只是第一次起作用？我错过了什么？

修改如果第一次运行函数，数据将在每个元素中被删除，并且在所有元素中都包含数据集。例如：我将数据设置为#scelta1，＃scelta2，＃scelta3，运行该函数，它将从所有数据中删除数据。然后我再次在＃scelta2中设置它，单击并删除所有数据。然后我再次在＃scelta1，＃scelta2，＃scelta3中设置数据，单击并将所有数据全部删除。但是，如果我将数据设置为#scelta2和#scelta4，它将只删除#scelta2中的数据......

Answer 1

编辑：似乎使用attr设置data属性导致了错误（我已经验证并且行为与您描述的一样）。通过使用data()设置属性，它似乎可以正常工作。

＆＃13;

$(document).ready(function () {
    
    //setting data with attr seems to be the cause of the bug here, use data() instead
    $('.sceltaButt').on("click", function() { 
      //$('#' + $(this).attr('id')).attr({'data-a': 'foo', 'data-b': 'bar'});
      $('#' + $(this).attr('id')).data('a', 'foo').data('b', 'bar');
      showData();
    });
    
    //then you don't need to remove them manually anymore, removeData is enough
    $('#removeData').on("click", function() {
      var conta = 1;
      var fiamma;
      while (conta < 7) {
          fiamma = $('#scelta'+conta);
          $(fiamma).removeData();
          //console.log(conta); 
          conta++;
      }
      showData();
    });
    
    //now this version doesn't work anymore because we use data()
    $('#removeWithoutData').on("click", function() {
      var conta = 1;
      var fiamma;
      while (conta < 7) {
          fiamma = $('#scelta'+conta);
          $.each($(fiamma).data(), function(i){ 
            $(fiamma).removeAttr("data-" + i);
          });
          //console.log(conta); 
          conta++;
      }
      showData();
    });
    
    function showData(){
      var result = '<br>';
      $('.sceltaButt').each(function(){
        /*$.each($(this)[0].attributes, function(){
            result += ' ' + this.name + ':' + this.value;
        });*/
        $.each($(this).data(), function(name){
            result += ' ' + name + ':' + this;
        });
        result += '<br>';
      });
      $('#result').html(result);
    }
    
    showData();
    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="sceltaButt" id="scelta1">ADD TO 1</button>
<button class="sceltaButt" id="scelta2" data-c="test">ADD TO 2</button>
<button class="sceltaButt" id="scelta3">ADD TO 3</button>
<button class="sceltaButt" id="scelta4" data-d="test2">ADD TO 4</button>
<button class="sceltaButt" id="scelta5">ADD TO 5</button>
<button class="sceltaButt" id="scelta6">ADD TO 6</button>
<button id="removeData">CLICK ME TO REMOVE (with removeData)</button>
<button id="removeWithoutData">CLICK ME TO REMOVE (without removeData)</button>
<div>CURRENT DATA: <span id="result"></span></div>

＆＃13;

Jquery从元素中删除属性（在循环中）仅在第一次工作时

1 个答案: