活动边框 (.showBorder) 在文本移动时居中

Question

// Get references to the two sets of boxes
var numbers = document.querySelectorAll(".clicked");
var letters = document.querySelectorAll(".border");

// Turn each node list into proper arrays:
numbers = Array.prototype.slice.call(numbers);
letters = Array.prototype.slice.call(letters);

// Loop through all the number boxes
numbers.forEach(function(box, index) {

  // Set up the click event handlers for all the number boxes
  box.addEventListener("click", function() {

    // Remove borders from each of the letter boxes
    letters.forEach(function(box) {
      box.classList.remove("showBorder");
    });

    // Apply the border to only the one clicked element
    var info = document.getElementsByClassName('box-tip')[0];
    info.style.left = 10 + (index * 45) + '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: 3px dashed black; }

.box-tip {
  display:inline;
  margin: auto;
	position: relative;
	visibility: hidden; 
 }

.numberCircle {
  border-radius: 50%;
  font-size: 12px;
  border: 5px solid #000;
  color: #fff;
  background: #000;
}

.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 class="info">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>

随着文本的移动，活动信箱 (.showBorder) 需要位于文本“您​​的衣领尺寸的常规长度”的中心。文本起始位置应与当前一样左对齐。为了与边界框居中，它只需要在点击字母“C”时才开始移动。欢迎所有建议。这是我的代码：

// Get references to the two sets of boxes
var numbers = document.querySelectorAll(".click");
var letters = document.querySelectorAll(".border");

// Turn each node list into proper arrays:
numbers = Array.prototype.slice.call(numbers);
letters = Array.prototype.slice.call(letters);

// Loop through all the number boxes
numbers.forEach(function(box, index) {

  // Set up the click event handlers for all the number boxes
  box.addEventListener("click", function() {

    // Remove borders from each of the letter boxes
    letters.forEach(function(box) {
      box.classList.remove("showBorder");
    });

    // Apply the border to only the one clicked element
    var info = document.getElementsByClassName('box-tip')[0];
    info.style.left = 10 + (index * 45) + 'px';
    info.style.visibility = 'visible';
    letters[index].classList.add("showBorder");
  });

});

.list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.list-box {margin:50px auto;padding:0;}
.box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.box-sleeve {margin:50px auto;padding:0;}
.showBorder { border: 3px dashed black; }

.box-tip {
  display:inline;
  margin: auto;
	position: relative;
	visibility: hidden; 
 }

.numberCircle {
  border-radius: 50%;
  font-size: 12px;
  border: 5px solid #000;
  color: #fff;
  background: #000;
}

.numberCircle span {
  text-align: center;
  display: block;
}

<ul class="list-box">
  <li class="click">1</li>
  <li class="click">2</li>
  <li class="click">3</li>
  <li class="click">4</li>
  <li class="click">5</li>
  <li class="click">6</li>
  <li class="click">7</li>
  <li class="click">8</li>
</ul>
<div class="box-tip">
  <span class="info">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

而不是info.style.left = 10 + (index * 45) + 'px';

 if (index > 2) {
  info.style.left = 10 + ((index - 3) * 45) + 'px';
}
else {
info.style.left = 0 + 'px';
}

这是它的小提琴：https://jsfiddle.net/flish/fm6821d5/ 现已更新，效果更好