无法更改动态更新的数据 ID

Unable to change dynamically updated data-id

本文关键字：数据 ID 更新 动态      更新时间：2023-09-26

我正在尝试动态更改锚#a-flop的data-id。问题是data-id只更改一次。我无法更改动态更新的值。

.HTML

 <ul class="nav navbar-nav navbar-center">
     <li class="dropdown">
         <a id="a-flip" href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
             <i class="fa fa-file-text m-r-10"></i> 
             Invoice 
             <span class="caret"></span>
         </a>
         <ul class="dropdown-menu" role="menu">
             <li>
                 <a id="a-flop" data-id="1" href="javascript:void(0)">
                     <i class="fa fa-user m-r-10"></i> 
                     Badge
                 </a>
             </li>
         </ul>
     </li>
 </ul>

简讯

<script>
    $(document).ready(function(){
      $(document).on('click', '#a-flop', function(){
          $this = $(this);
          alert($this.data('id'));
          if ($this.data('id') == 0) {
             $this.attr('data-id', 1);
          } else {                   
             $this.attr('data-id', 0);
          }
      });  
    });
</script>

小提琴链接 - http://jsfiddle.net/Lv37o8wu/

这是因为您设置的是属性值而不是 dom 属性。 您还应该使用 .data() 来设置值：

$(document).on('click', '#a-flop', function(){
          $this = $(this);
          alert($this.data('id'));
          if ($this.data('id') == 0) {
             $this.data('id', 1);
          } else {
             $this.data('id', 0);
          }
      });

工作演示

相关文章：