Question

我想要特定的宽度，特定的点击动画，但它不起作用。为什么呢？

这是一个例子：

从0到959px> anim1从960到1279px> anim2从1280年到1699年> anim3从1700开始 - 开放式结束＆gt; anim4

这是我的代码：

$(document).ready(function(){
if ($(window).width() > 959) {
    $("#mains").click(function(){
    anim1();
    });
}
});

$(document).ready(function(){
if ($(window).width() > 1279) {
    $("#mains").click(function(){
    anim2();
    });
}
});

$(document).ready(function(){
if ($(window).width() > 1699) {
    $("#mains").click(function(){
    anim3();
    });
}
});

$(document).ready(function(){
if ($(window).width() < 1700) {
    $("#mains").click(function(){
    anim4();
    });
}
});

Answer 1

您根据屏幕尺寸绑定$(document).ready()上的动画。例如，当DOM准备就绪且窗口宽度小于1700时，将仅使用带有anim4（）的函数。您需要做的是将窗口宽度检查放在单个绑定中。例如：

$(document).ready(function(){
    $("#mains").click(function() {
        if ($(window).width() < 959) {
            // do something
        } else if  ($(window).width() < 1700) {
            // do something else, etc.
        }
    });
});

Answer 2

好像你错了条件。此外，您只能使用一个文档就绪事件处理程序，并使用if else if语句来区分案例。语句应专门设置宽度边框。类似的东西：

if ($(window).width() < 969 ) {
  anim1();
} else if ($(window).width() >= 970 && $(window).width() < 1200) {
  anim2();
}

宽度是每个人都可以看到的示例。

除了anim *函数可能存在错误，但这些错误肯定会使代码搞乱。

Answer 3

您根据宽度大小绑定事件。我建议在事件处理程序中检查宽度并相应地执行操作

$(document).ready(function () {
    $("#mains").click(function () {
        if ($(window).width() > 959) {
            anim1();
        }
        if ($(window).width() > 1279) {
            anim2();
        }
        if ($(window).width() > 1699) {
            anim3();
        }
        if ($(window).width() < 1700) {
            anim4();
        }
    });
});

Answer 4

尝试

$(document).ready(function(){
          if ($(window).width() > 1699) {
                 anim3();
           }else if($(window).width() > 1279){
                 anim2();
            }else if($(window).width() > 959){
                  anim1();
           } 
   });

Answer 5

仔细阅读现有代码，并考虑如果窗口宽度恰好是1750，它会做什么：

您首次使用> 959进行测试时为真，因此它会绑定执行anim1()的点击处理程序。
使用> 1279的第二次if测试也为真，因此它将绑定另一个执行anim2()的点击处理程序。
> 1699测试也为真，绑定了执行anim3()的第三个点击处理程序。
第四个if测试是假的，因为它有<而不是>，但实际上宽度为1750，你想要anim4()运行。

然后点击会调用前三个动画。

您需要的是if/else if/else if/else结构，因此只使用了四个animX()函数中的一个。此外，您可能希望在单击处理程序中进行测试，以便它在单击时使用窗口宽度，而不是页面加载时的宽度。所以：

$(document).ready(function() {
  $("#mains").click(function() {
    var w = $(window).width();
    if (w < 960)
      anim1();
    else if (w < 1280)
      anim2();
    else if (w < 1700)
      anim3();
    else
      anim4();
  });
});

请注意，在点击处理程序的开头，我将$(window).width()放入（富有想象力的）w变量中，以避免在else if中重复这两个函数调用语句。

响应式jquery点击功能

5 个答案: