Question

我正在尝试动态更改data-id锚#a-flop。问题是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>

JQUERY

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

FIDDLE LINK - http://jsfiddle.net/Lv37o8wu/

Answer 1

这是因为您正在设置属性值而不是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);
          }
      });

<强> Working Demo

无法更改动态更新的data-id

1 个答案: