jQuery 在偶数和奇数点击时以不同方式运行答案

【问题标题】：jQuery to run differently on even and odd number of clickjQuery 在偶数和奇数点击时以不同方式运行
【发布时间】：2015-01-07 03:33:21
【问题描述】：

我有一个按钮，我想在单击它时设置动画并重新定位，但是当第二次单击它时，我希望它“飞”回原来的位置。对此，我认为我可以制作一个在偶数和奇数点击时运行的函数，但它似乎不起作用.. 任何人都尝试过类似的东西，或者可以在我的代码或逻辑中发现缺陷？？

$('#ure_knap').on('click', function() {
    var click = $(this).data('clicks');
    if (click % 2 == 1) {
        $('.ure_billeder').show();
    }else{
        $('.ure_billeder').hide();
    };
});

【问题讨论】：

标签： jquery function jquery-animate

【解决方案1】：

看起来您的代码没有增加点击次数。

$('#ure_knap').on('click', function() {
    var click = $(this).data('clicks');
    if (click % 2 == 1) {
        $('.ure_billeder').show();
    }else{
        $('.ure_billeder').hide();
    };
    $(this).data('clicks',click+1);
});

但是，另一方面...为什么不直接使用.toggle()，根据我看到的情况，它会做同样的事情。

【讨论】：

【解决方案2】：

您需要使用点击次数更新data 属性。但是，您的构造非常简单，您可以将其简化为：

$('#ure_knap').on('click', function() {
    $('.ure_billeder').toggle();
});

但话说回来，您可能只是为了提出问题而简化了代码：

$('#ure_knap').on('click', function() {
    var click = +$(this).data('clicks') || 0;
    if (click % 2 == 1) {
        $('.ure_billeder').show();
    }else{
        $('.ure_billeder').hide();
    };
    $(this).data('clicks',click+1);
});

$('#ure_knap').on('click', function() {
    var click = +$(this).data('clicks') || 0;
    if (click % 2 == 1) {
        $('.ure_billeder').show();
    }else{
        $('.ure_billeder').hide();
    };
    $(this).data('clicks',click+1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="ure_knap">Click</button>
<div class="ure_billeder">Content</div>

【讨论】：

【解决方案3】：

问题是你从不设置数据属性，所以它永远不会改变。

使用布尔值似乎更容易

$('#ure_knap').on('click', function() {
    var click = $(this).data('clicks');

    if (click) {
        $('.ure_billeder').show();
    }else{
        $('.ure_billeder').hide();
    };

    $(this).data('clicks', !click); // you have to set it

});

$('#ure_knap').on('click', function() {
  var click = $(this).data('clicks');

  if (click) {
    $('.ure_billeder').show();
  } else {
    $('.ure_billeder').hide();
  };

  $(this).data('clicks', !click); // you have to set it

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ure_knap">click</div>
<br/>
<div class="ure_billeder">Tada</div>

但在这种情况下，您也可以使用toggle

$('#ure_knap').on('click', function() {
    $('.ure_billeder').toggle();
});

【讨论】：

是的，我知道切换会更容易，如果我只想隐藏/显示，但我也想重新定位单击的按钮，如果再次单击，我希望它回到起始位置，我不能为此使用切换:)
我认为您正在尝试做更多事情，而布尔标志就是这样做的方法。