Jquery 从元素中删除属性（在循环中）仅在第一次有效

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() 设置属性似乎可以正常工作。

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

<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>

Jquery 从元素中删除属性（在循环中）仅在第一次有效

Jquery Remove Attributes from element (in loop) only work the first time

javascript

jquery

custom-data-attribute