Question

我希望如此，当用户点击“2”按钮（下面的代码）时，按钮上会出现clicked = true的数据属性。最终我希望这样，当用户点击“3”按钮时，应删除“2”按钮clicked数据，并且3按钮数据属性应为clicked = true。现在，我似乎无法做一个简单的事情，比如将数据放在元素上并与之交互

HTML：

<body>
    <button class = "two">2</button>
    <button class="three">3</button>
</body>

脚本：

 $(document).ready( function(){
          //when user clicks on button the button should show signs of data attr
            $('.two').on('click',function(e){
                $(this).data('clicked', true);
                //alert('sup')
            })
            if($('.two').data('clicked')){
                alert('received from data')
            }
  });

我尝试按照this chosen answer切换数据attr，以便我可以找出点击哪个元素以便稍后在我的代码中执行操作

Answer 1

我认为您要做的是存储点击的按钮以便稍后检索。

在这种情况下，最好使用基于类的解决方案，如

$(document).ready(function() {
  //when user clicks on button the button should show signs of data attr
  var $clicks = $('.clicks').on('click', function(e) {
    $(this).addClass('clicked');
    $clicks.not(this).removeClass('clicked');
  });

  $('#test').click(function() {
    alert($('.clicks.clicked').text())
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="two clicks">2</button>
<button class="three clicks">3</button>
<br />
<button id="test">Test</button>

如果您想继续点击data-clicked属性，则需要使用.attr()而不是.data()，因为.data()不会更新属性值

$(document).ready(function() {
  //when user clicks on button the button should show signs of data attr
  var $clicks = $('.clicks').on('click', function(e) {
    $(this).attr('data-clicked', 'true');
    $clicks.not(this).removeAttr('data-clicked');
  });

  $('#test').click(function() {
    alert($('.clicks[data-clicked]').text())
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="two clicks">2</button>
<button class="three clicks">3</button>
<br />
<button id="test">Test</button>

jquery .data（）没有将数据附加到元素

1 个答案: