jquery - 不同屏幕尺寸的不同点击动作

Question

我正在尝试根据屏幕宽度为单击操作编写 2 个函数：

$(".view_offer_wrapper").click(function(){
    var current = $(".compare_wrapper div:last-child").index(this);
    $(".product_desc_expand").hide();
});

if ($(window).width() < 480) {
  // Different action for same click function
}

第一次点击工作正常，没有问题。

但是如果窗口大小 < 480，则启动第一次单击，而不是 if 条件内的单击函数。

Answer 1

第一个解决方案是检查点击处理程序中的条件

$(".view_offer_wrapper").click(function () {
    if ($(window).width() < 480) {
        //action 1
    } else {
        //action2
        var current = $(".compare_wrapper div:last-child").index(this);
        $(".product_desc_expand").hide();
    }
});

第二种解决方案是根据条件注册不同的点击处理程序

if ($(window).width() < 480) {
    $(".view_offer_wrapper").click(function () {
        //action 1
    });
} else {
    $(".view_offer_wrapper").click(function () {
        //action2
        var current = $(".compare_wrapper div:last-child").index(this);
        $(".product_desc_expand").hide();
    });
}

注意：如果要支持调整窗口大小，则必须选择第一个解决方案

Answer 2

尝试这个

$(".view_offer_wrapper").click(function(){
if ($(window).width() < 480) {
    alert('width less than 480');
   }
 else
 {
     alert('width grater than 480');
 }
});

您可以在 click 函数中使用if else 。