Question

如果窗口宽度小于 500px ，当我点击按钮时我想添加一个css类，如果宽度大于 500px，我想添加另一个类 EM>。我尝试了以下内容：

$(window).resize(function(){ 
  if ($(window).width() > 500) {
      $(document).on('click','#btn',function(e) {
          e.preventDefault();
          $("#div").addClass("red");
          $("#div").removeClass("blue");
          runFunctionA(); //is different from FunctionB()
      });   
  } else {
      $(document).on('click','#btn',function(e) {
          e.preventDefault();
          $("#div").addClass("blue");
          $("#div").removeClass("red");
          FunctionB(); //is different from FunctionA()
      });
  };
});

Codepen Demo

仅当您将Codepen iframe窗口调整为＆lt; 500 时，点击才有效，但如果＆gt; 500 不起作用。

任何帮助表示赞赏！非常感谢！

Answer 1

下面基于窗口宽度的代码工作，如果窗口调整大小发生，那么你单击按钮，它将检查客户端宽度并处理函数

试试这个，

$(document).on('click', '#btn', function (e) {
    e.preventDefault();
    if ($(window).width() > 500) {
        $("#div").addClass("red");
        $("#div").removeClass("blue");
    } else {
        $("#div").addClass("blue");
        $("#div").removeClass("red");
    }
});

DEMO

为什么click事件在$（window）.resize（）上不能工作两次？

1 个答案: