运行仅当屏幕宽度 >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()
}

运行仅当屏幕宽度 >768px 时的部分脚本

run part of the script only when screen width is >768px

javascript

jquery

user-interface

jquery-ui

responsive

运行 仅当屏幕宽度 >768px 时的部分脚本

run part of the script only when screen width is >768px

javascript

jquery

user-interface

jquery-ui

responsive

运行仅当屏幕宽度 >768px 时的部分脚本