如何将包含文本的额外类（.info）添加到我的js代码中

Question

.info需要采用与.showBorder相同的方式，这意味着将与边框一起移动，但将放在框的上方。使用jQuery构建它的更好方法也是受欢迎的，欢迎所有建议！

＆＃13;

＆＃13;

 // 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
    letters[index].classList.add("showBorder");
  });
  
});

＆＃13;

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

＆＃13;

<section>
        <div class="container">
                   <ul class="list-box">
                       <li class="click">1</li>
                       <li class="click">2</li>
                       <li class="click">3</li>
                       <li class="click">4</li>
                   </ul> 
                <span class="info">paragraph</span>
                   <ul class="box-sleeve">
                       <li class="border">a</li>
                       <li class="border">b</li>
                       <li class="border">c</li>
                       <li class="border">d</li>
                   </ul> 
                </div>
            
    </section> 

＆＃13;

＆＃13;

＆＃13;

Answer 1

根据您提供的代码，无法想出更好的方法。我希望你能得到这个想法并在项目中实现它。

修改

检查框后，段落可见。

＆＃13;

＆＃13;

// 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('info')[0];
    info.style.left = 10+(index*45) + 'px';
    info.style.display = 'inline';
    letters[index].classList.add("showBorder");
  });
  
});

＆＃13;

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

＆＃13;

<section>
        <div class="container">
                   <ul class="list-box">
                       <li class="click">1</li>
                       <li class="click">2</li>
                       <li class="click">3</li>
                       <li class="click">4</li>
                   </ul> 
                <span class="info">paragraph</span>
                   <ul class="box-sleeve">
                       <li class="border">a</li>
                       <li class="border">b</li>
                       <li class="border">c</li>
                       <li class="border">d</li>
                   </ul> 
                </div>
            
    </section>

＆＃13;

＆＃13;

＆＃13;