javascript - 添加 $(box).bind ("click touchstart", function() { 到我的逻辑中，但在 iPad 上不成功

Question

我已将 '$(box).bind("click touchstart", function() {' 添加到我的脚本中，但仍未在 iPad 上运行。我正在尝试让此脚本在所有设备上运行，以便用户可以选择框编号 1-8，下面将显示带有边框的推荐。知道为什么这在 iPad 上会出现问题吗？有更好的方法来构建它吗？

var numbers = document.querySelectorAll(".clicked");
var letters = document.querySelectorAll(".border");

numbers.forEach(function(box, index) {

  $(box).bind("click touchstart", function() {

    letters.forEach(function(box) {
      box.classList.remove("showBorder");
    });

    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");
   
  });
  
      $(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 { outline: 1px dashed #233354; outline-offset:1px;}
.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>
<span>Test some logic one</span>

<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>
<span>Test some logic two</span>
</div>
<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

尝试以下调整:

• 首先检测并存储用户代理ua = navigator.userAgent;
• 然后将其与 iPad 匹配并存储 event = (ua.match(/iPad/i)) ? “touchstart”:“点击”；。
• 用作 $(box).bind(event, function() {//do stuff });。

在 iPad Air 上工作。

var numbers = document.querySelectorAll(".clicked"),
  letters = document.querySelectorAll(".border"),
  ua = navigator.userAgent,
  event = (ua.match(/iPad/i)) ? "touchstart" : "click";

numbers.forEach(function(box, index) {
  $(box).bind(event, function() {
    letters.forEach(function(box) {
      box.classList.remove("showBorder");
    });
    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");
  });
  $(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 {
  outline: 1px dashed #233354;
  outline-offset: 1px;
}

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


/* add these to prevent text move below 768 viewports */

@media (max-width: 768px) {
  .box-tip span {
    position: fixed;
    left: 10px;
  }
  .box-tip span.numberCircle {
    position: fixed;
    left: 236px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Test some logic one</span>

<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>
  <span>Test some logic two</span>
</div>
<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>