Question

我已将此代码放在jQuery中的resize函数中。但是这个click函数被多次调用。当我点击所需链接时，切换会多次发生

if ($(window).width() <=768){
    if ($('body').hasClass('page-search-ads')){
        if ($('#-clasifika-results-simple-search-form               img').hasClass('funnel')) {
        } else {
            $('#-clasifika-results-simple-search-form').append("<img class='funnel' src='" + Drupal.settings.basePath + "sites/all/themes/clasifika/images/filter.png'/>");
        }

        $('.funnel').click(function(){
            $('.vehicle-cat, .vehicle-brand, .city-name-filter, .vehicle-mileage,.overall-cat,.city-name,.boat-bed,.boat-type,.boat-brand,.nautical-length,.overall-year,.airplane-type,.fashion-cat,.airplane-brand,.airframe-time,.propeller-hours,.monthly-salary,.amount-slider,.area-slider').slideToggle();
            console.log("funnel click");
        });
    }
}

Answer 1

问题是因为{em>每个像素调整窗口大小一次resize()事件。因此，在调整大小时，您将附加多个click处理程序。您只需将click移到resize处理程序之外，并使用委派的事件处理程序。试试这个：

$(window).resize(function() {
    if ($(window).width() <= 768 && $('body').hasClass('page-search-ads') && !$('#-clasifika-results-simple-search-form img').hasClass('funnel')) {
        $('#-clasifika-results-simple-search-form').append("<img class='funnel' src='" + Drupal.settings.basePath + "sites/all/themes/clasifika/images/filter.png'/>");
    }
});

$('#-clasifika-results-simple-search-form').on('click', '.funnel', function(){
    $('.vehicle-cat, .vehicle-brand, .city-name-filter, .vehicle-mileage, .overall-cat, .city-name, .boat-bed, .boat-type, .boat-brand, .nautical-length, .overall-year, .airplane-type, .fashion-cat, .airplane-brand, .airframe-time, .propeller-hours, .monthly-salary, .amount-slider, .area-slider').slideToggle();
    console.log("funnel click");
});

我还建议您使用公共类或单个包含元素来对点击处理程序中的所有元素进行分组，因为这是我见过的最大选择器。此外，假设您只能显示/隐藏相关元素，CSS媒体查询也可能是resize()逻辑的更好解决方案。

即使我只调用了一次

1 个答案: