僅當屏幕寬度> 768px時才運行腳本的一部分

Question

var'box-tip'在選擇框時移動div。 我只希望在屏幕寬度超過768px時發生這種情況。 如何指定腳本的那部分只能以特定的屏幕寬度運行？ 邊框選擇仍應處於活動狀態，但移動文本應在低於768px時停止移動。 歡迎所有建議。

 var numbers = document.querySelectorAll(".clicked"); var letters = document.querySelectorAll(".border"); numbers.forEach(function(box, index) { box.addEventListener("click", function() { letters.forEach(function(box) { box.classList.remove("showBorder"); }); if($( window ).width() > 768){ var info = document.getElementsByClassName('box-tip')[0]; if (index > 2) { info.style.left = 11 + ((index - 3) * 45) + 'px'; } else { info.style.left = 0 + 'px'; } info.style.visibility = 'visible'; letters[index].classList.add("showBorder"); } else { info.style.left = 0 + 'px'; info.style.visibility = 'visible'; letters[index].classList.add("showBorder"); } }); $(document).on("click", '.clicked', function(){ $('.clicked').removeClass('selected'); $(this).addClass('selected'); }); }); 

 .list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;} .list-box {margin:15px auto;padding:0;} .box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;} .box-sleeve {margin:15px auto;padding:0;} .showBorder { border: 1px dashed #233354; } .box-tip { display:inline; margin: auto; position: relative; visibility: hidden; padding-left:10px; } .numberCircle { border-radius: 90%; font-size: 12px; border: 2px solid #000; color: #fff; background: #000; padding: 0 4px; } .numberCircle span { text-align: center; display: block; } li.selected {color:#fff;background-color:#000;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list-box"> <li class="clicked">1</li> <li class="clicked">2</li> <li class="clicked">3</li> <li class="clicked">4</li> <li class="clicked">5</li> <li class="clicked">6</li> <li class="clicked">7</li> <li class="clicked">8</li> </ul> <div class="box-tip"> <span>Regular length for your collar size</span> <span class="numberCircle">?</span> </div> <ul class="box-sleeve"> <li class="border">a</li> <li class="border">b</li> <li class="border">c</li> <li class="border">d</li> <li class="border">e</li> <li class="border">f</li> <li class="border">g</li> <li class="border">h</li> </ul> 

Answer 1

您可以在腳本中的JQuery中添加條件

// Returns width of browser viewport
if($( window ).width() > 768){
//If you want to add dynamically a class or remove one
$('.selector').addClass(); // or removeClass()
}