javascript - 交替按钮不起作用

Question

我一直在尝试制作一个按钮，根据是否按下按钮给出不同的答案(就像按下按钮后得到"is"，但如果未按下按钮则得到“否”) )，但是当我运行这段代码时，我得到的只是"is"，我该如何解决这个问题？

注意:我对 Javascript 和 Jquery 非常陌生，因此请彻底解释您的答案。

$('#option1').data('unclicked', false)

$('#option1').click(function() {
    if ($('#option1').data('unclicked', false)) {
        $('#option1').data('clicked', true);
    } else if ($('#option1').data('clicked', true)) {
        $('#option1').data('clicked', false);
    } else {
        alert('ERROR');
    }

    if ($('#option1').data('clicked', true)) {
        alert('yes');
    } else if ($('#option1').data('clicked', false)) {
        alert('no');
    } else {
        alert('ERROR');
    }
});

Answer 1

您的 if 语句正在设置数据属性，而不是测试其当前值。

if ($('#option1').data('clicked', true)) {

应该是

if ($('#option1').data('clicked') === true)  {
// or...
if ($('#option1').data('clicked')) { // same as above

您还有两种不同的数据属性，“已点击”和“未点击”，这会给您带来一些困惑 - 您(尝试)测试哪一个与更新哪一个并不一致。将其简化为单个属性。

这就是 bug 的情况。你正在做一些不必要的工作来测试除了“真”和“假”之外的第三种可能性——它总是会是其中之一。也没有必要将 data 属性初始化为 false - 如果它未初始化，无论如何它都会评估为 false。

将所有这些放在一起，您的代码可以简化为:

$('#option1').click(function() {
  // 'this' is now the element that was clicked
  $(this).data('clicked', !($(this).data('clicked'))) // set the data attribute to the opposite of its current value.  The "!" means "not"

  if ($(this).data('clicked')) {
    alert('yes');
  } else {
    alert('no');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="option1">Click</div>