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

Question

var＆＃39; box-tip＆＃39;在选择框时移动div。我只希望在屏幕宽度超过768px时发生这种情况。如何指定脚本的那部分只能以特定的屏幕宽度运行？边框选择仍应处于活动状态，但移动文本应在低于768px时停止移动。欢迎提出所有建议。

＆＃13;

＆＃13;

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');
});

});

＆＃13;

.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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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()
}