Question

HTML

<div class="dropdown">
    <label class="add-genre-filter not-selected">Add genre filter</label>
    <select class="filter" name="filter[]">
        <option value="some-value">Some Item</option>
        <option value="some-value">Some Item</option>
        <option value="some-value">Some Item</option>
        <option value="some-value">Some Item</option>
    </select>
    <span class="cancel"> x </span>
</div>

JS

$(document).ready(function(){
    var genreLimit = 3;

    $('.dropdown .add-genre-filter').live( 'click', function(){
        genreLimit ? ( $(this).parent().append(options) , genreLimit-- ) : false;
        console.log(genreLimit);
    });
    $('.dropdown .cancel').live( 'click', function(){
        $(this).prev().fadeOut("normal", function(){ $(this).remove(); });
        $(this).fadeOut("normal", function(){ genreLimit++; $(this).remove(); });
        console.log(genreLimit);
    });

});

注意：我正在使用jQuery 1.6，这就是为什么仍然使用live()函数

点击<span class="cancel"> select和span淡出并从文档中删除。同时，它增加了{strong> genreLimit 的价值1

但如果我反复点击span中的 x ，则 genreLimit 值会增加点击次数，直至完全淡出为止。我知道它应该像那样减少因为它在click事件中。

但是，我想在fadeOut中仅增加一次值。因此，多次单击不会改变我的功能。这可以做什么？

Answer 1

您可以设置一个标志，表示它正在执行淡入淡出..

$(document).ready(function(){
    var genreLimit = 3;
    var is_fading = false;

    $('.dropdown .add-genre-filter').live( 'click', function(){
        genreLimit ? ( $(this).parent().append(options) , genreLimit-- ) : false;
        console.log(genreLimit);
    });
    $('.dropdown .cancel').live( 'click', function(){
        if (is_fading) return; // don't run if it is already fading...

        is_fading = true;
        // choose the correct callback to 'unlock' the flag..
        $(this).prev().fadeOut("normal", function(){ $(this).remove(); is_fading = false;? });
        $(this).fadeOut("normal", function(){ genreLimit++; $(this).remove(); is_fading = false;? });
        console.log(genreLimit);
    });
});

如何防止在click和fadeOut函数内改变变量的值？

1 个答案: