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

Posted 2023-05-08

【中文标题】jQuery 在偶数和奇数点击时以不同方式运行

【英文标题】：jQuery to run differently on even and odd number of click

【发布时间】：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();
    ;
);

【参考方案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();
);

【讨论】：

是的，我知道切换会更容易，如果我只想隐藏/显示，但我也想重新定位单击的按钮，如果再次单击，我希望它回到起始位置，我不能为此使用切换:)

我认为您正在尝试做更多事情，而布尔标志就是这样做的方法。