Question

我制作了这个js脚本：

$(document).ready(function() {  
    if($(window).width()<768) $("#button-opl").on('click',function(){
        $("#views-exposed-form-attraktioner-block").slideToggle();  
    }); 
});

但现在我要添加，如果屏幕大于768，则应禁用点击。我怎么做？

thannks

Answer 1

如果窗口调整大小，您基本上只需要将事件绑定到窗口。幸运的是，jQuery已经为你做到了这一点。所以，就这样直截了当吧！这是一个可测试的片段，向您展示如何绑定和记录此类事件：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
  <script>      
    $( window ).resize(function() {
          $( "#log" ).append( "window was resize!!!");
        });
  </script>
<body>
    <h5 id="log"></h5>
</body>
</html>

Answer 2

由于窗口大小可以更改，因此您应该始终绑定事件，但只有在满足条件时才对其执行操作。

$(function() {
  $("#button-opl").on("click",function() {
    if( innerWidth < 768) {
      // ^ WAY faster than building a jQ object for a property that's already standard ;)
      $("#views-exposed-form-attraktioner-block").slideToggle();
    }
  });
});

Answer 3

如果您只想在文档加载时评估屏幕大小，则可以执行以下操作：

$(document).ready(function() {

  const width = $(window).width();

  if (width < 768) {
    // Do something
    $("#button-opl").on('click', function() {
      $("#views-exposed-form-attraktioner-block").slideToggle();
    });
  } else if (width >= 768) {
    // Do something else
    $("#button-opl").prop('disabled', true);
  }
});

但是，如果您想根据屏幕大小的变化（用户手动调整窗口大小）动态启用/禁用按钮，则需要使用事件监听器并在每次调整窗口大小时进行评估，如下所示：

$(document).ready(function() {

  $("#button-opl").on('click', function() {
    $("#views-exposed-form-attraktioner-block").slideToggle();
  });

  const reviewScreenWidth = function() {
    const width = $(window).width();
    if (width < 768) {
      // Do something
      $("#button-opl").prop('disabled', false);

    } else if (width >= 768) {

      // Do something else
      $("#button-opl").prop('disabled', true);
    }
  }

  // Call once when the page has loaded
  reviewScreenWidth();

  // Call every time the screen size changes
  window.addEventListener("resize", reviewScreenWidth);
});

JS屏幕尺寸点击

3 个答案: