クリック機能は1024pxのブレークポイントを超えてのみ利用可能

Question

私は画面の幅1024以上で機能したいミュートボタンを持っています。 上記のブレークポイント以下で機能を使用するべきではありません。私はいくつかの方法を試しましたが、まだこれを達成することはできません。任意のポインタが役立つだろう。以下の私のスニペットをご覧ください。

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"); 
 

 
     } 
 
    } 
 
    });

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

Answer 1

は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 2

を私が思うに、あなたは、サイズ変更があった場合は、ウィンドウの幅をチェックして、必要なアクションを実行する必要があります。このような 何か：

$(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 3

コードを実行しているときにクリックハンドラを追加しています。クリックをしているときではありません。そのコードを実行するときにwidth> 1024pxになると、ハンドラが作成され、幅が1024px未満になった場合でも動作します。同様にそのコードと幅< 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があります。