响应jQuery的点击功能

我要为特定的宽度，具体点击的动画，但它不工作。为什么？响应jQuery的点击功能

下面的例子：

从0 - 959px> anim1从960 - 1279px> anim2从1280至1699年> anim3从1700年 - 开口端> 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(); 
    }); 
} 
});

来源

2014-01-19 user3191542

注意：对于宽度大于1700的所有动画函数将被称为 –

我修复了您的代码。您不需要那么多.ready（）。还有一些调试。 http://jsfiddle.net/B2FU9/ – MortenMoulder

谢谢大家的帮助！：=） – user3191542

阅读，想想它会怎么做，如果窗口宽度正好是1750：

你的第一个，如果与> 959测试将是真实的，因此将绑定一个单击处理程序，做anim1()。
第二，如果有> 1279将测试也是真实的，因此会结合其他点击处理，做anim2()。
> 1699测试将也为真，绑定第三个点击处理程序，确实anim3()。
第四个如果测试将是错误的，因为它具有<而不是>，但实际上对于宽度为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语句。

来源

2014-01-19 14:05:16 nnnnnn

不错！这是最好的答案！它工作得很好！非常感谢！ – user3191542

您在$(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. 
     } 
    }); 
});

来源

2014-01-19 13:46:01 Kaloyan

看来你错了条件。您也可以只使用一个文档就绪事件处理程序，并使用if else if语句来区分个案。这些声明应该专门设置宽度边界。例如：

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

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

除，有可能是在动画*函数的错误，但这些错误铁定陷入困境的代码。

来源

2014-01-19 13:46:29

尝试宽度尺寸的基础上

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

来源

2014-01-19 13:47:05

你要绑定的事件。我会建议通过现有的代码在事件处理程序来检查的宽度和执行操作的相应

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

来源

2014-01-19 13:47:16 Satpal

请注意，前两个'else if'情况在此将不会被调用，因为它们应用的宽度会触发第一个“if”。 – nnnnnn

响应jQuery的点击功能

回答

相关问题