添加$（box）.bind（＆＃34;点击touchstart＆＃34;，function（）{到我的逻辑但在iPad上没有成功

Question

我添加了＆＃39; $（框）.bind（＆＃34;点击touchstart＆＃34;，功能（）{＆＃39;到我的脚本但仍未在iPad上运行。我＆＃39; m试图让这个脚本在所有设备上运行，以便用户可以选择1-8的盒子，并且下面会显示带边框的推荐。任何想法为什么这会在iPad上破坏？有没有更好的方法来构建它？

＆＃13;

＆＃13;

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

});

＆＃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 { 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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试以下调整：

• 检测＆amp;首先存储用户代理ua = navigator.userAgent;
• 然后将其与iPad匹配并存储event = (ua.match(/iPad/i)) ? "touchstart" : "click";。
• 用作$(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>