jsコードにテキストを含む余分なクラス（.info）を追加するには

Question

.infoは.showBorderと同じように動作する必要があります。つまり、境界とともに移動しますが、ボックスの上に配置されます。 jQueryを使用してこれを構造化するより良い方法も歓迎されています。

// 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"); 
 
    }); 
 
    
 
});

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

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

Answer 1

は、あなたが提供されたコードに基づいて、これを行うには良い方法を考えることができませんでした。私はあなたがアイデアを得て、それをあなたのプロジェクトに実装できることを願っています。

編集

チェックボックスをオンにした後に段落が表示されます。 box`上記

// 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"); 
 
    }); 
 
    
 
});

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

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