Question

我有一个静音按钮，我只想在屏幕宽度1024以上工作。在上述断点之下，该功能不可用。我尝试了几种方法，但仍然无法实现这一目标。任何指针都会有所帮助。请参阅下面的我的代码：

＆＃13;

if($(window).width() > 1024) { 
     $("#mute").click(function() {

         if ($("video").prop('muted')) {
             $("video").prop('muted', false);
             $(this).removeClass("fa-volume-off");
             $(this).addClass("fa-volume-up");

         } else {
             $("video").prop('muted', true);
             $(this).removeClass("fa-volume-up");
             $(this).addClass("fa-volume-off");

         }
     }
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 1

我认为，如果有调整大小，您应检查窗口宽度，然后执行必要的操作。像这样：

$(document).ready(function(){
  $( window ).resize(function() {
    if(window.width < 1024)
    {
      $("#mute").off("click");
    }
    else
    {
      $("#mute").click(function() {
        . . .
      })
    }
  });

  $("window").trigger("resize"); // On trigger resize to make button active if window is already > 1024
})

Answer 2

删除了javascript错误，现在应该可以正常工作了。

if($(window).width() > 1024) { 
     $("#mute").click(function() {

         if ($("video").prop('muted')) {
             $("video").prop('muted', false);
             $(this).removeClass("fa-volume-off");
             $(this).addClass("fa-volume-up");

         } else {
             $("video").prop('muted', true);
             $(this).removeClass("fa-volume-up");
             $(this).addClass("fa-volume-off");

         }
     });
  }

Answer 3

您在执行代码时添加了点击处理程序，而不是在执行点击时。当宽度>执行该代码时1024px处理程序被创建，当宽度低于1024px时仍然可以工作。类似地，当执行该代码和宽度＆lt; 1024px然后永远不会创建点击处理程序！

所以，试试这段代码（在$ .ready或类似内部）：

$("#mute").click(function() {

  if ($(window).width() <= 1024) return; // maybe return false;

  if ($("video").prop('muted')) {
    $("video").prop('muted', false);
    $(this).removeClass("fa-volume-off");
    $(this).addClass("fa-volume-up");

  } else {
    $("video").prop('muted', true);
    $(this).removeClass("fa-volume-up");
    $(this).addClass("fa-volume-off");

  }
});

编辑：正如我上面回答时已经评论的那样...

Answer 4

尝试将if语句与click事件处理程序交换。

$(document).ready(function() {
  $("#mute").click(function() {
    if ($(window).width() > 1024) {
      alert("Clicked");
    }
  });
});

这是一个Fiddle供您测试。

点击功能仅在1024px断点之上可用

4 个答案: