仅在屏幕宽度为 >768 像素时运行部分脚本

Question

var'box-tip'movesdiv当做出盒子选择时。我只希望当屏幕宽度高于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()
}