Question

我有一个按钮，我希望动画并在点击时重新定位，但是当它再次点击它时，我想要它＆＃34;飞＆＃34;回到原来的位置。为此，我认为我可以创建一个函数来运行偶数和奇数点击，但它似乎工作..任何人尝试类似的东西，或可以在我的代码或逻辑中的缺陷？

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

Answer 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()，这将基于我所看到的内容做同样的事情。

Answer 2

问题是你永远不会设置数据属性，因此它永远不会改变。

使用布尔值似乎更容易

$('#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

});

FIDDLE

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

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

Answer 3

您需要使用点击次数更新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);
});

＆＃13;

$('#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);
});

＆＃13;

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

＆＃13;

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

3 个答案: