在點擊時將邊框添加到其他班級

Question

當點擊框1時，應該在框a'周圍出現邊框。當點擊框「a」時，應該在框「b」的周圍出現邊框，等等...... JavaScript看起來應該做什麼？

.list-box li {display: inline;list-style-type: none;padding: 2em;background:red;} 
 
.list-box {margin-top: 50px;} 
 
.box-sleeve li {display: inline;list-style-type: none;padding: 2em;background:red;} 
 
.box-sleeve {margin:100px auto;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<section> 
 
     <div class="container"> 
 
      <div class="row col-content"> 
 
       <div class="col-lg-12"> 
 
        <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> 
 
        <div class="txt">some text</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> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </section>

Answer 1

通過創建數組，我們可以通過 「同步」 了兩套箱子。

// 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: 2em;background:red;} 
 
.list-box {margin-top: 50px;} 
 
.box-sleeve li {display: inline;list-style-type: none;padding: 2em;background:red;} 
 
.box-sleeve {margin:100px auto;} 
 
.showBorder { border: 3px solid black; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<section> 
 
     <div class="container"> 
 
      <div class="row col-content"> 
 
       <div class="col-lg-12"> 
 
        <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> 
 
        <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> 
 
      </div> 
 
     </div> 
 
    </section>

Answer 2

我們可以使用jQuery來實現這一目標：

$(document).ready(function(){ 
    var $list = $("ul.list-box"); 
    var $sleeves = $("ul.box-sleeve"); 
    var $listLI = $list.children("li"); 
    var $sleevesLI = $sleeves.children("li"); 

    $listLI.each(function(index, elem){ 
    var $curr_li = $listLI.eq(index);//I know you can use $(this) but it's for understanding purpose that I don't use it 

    $curr_li.click(function(){ 
    var $corresponding_sleeveLI = $sleevesLI.eq(index); 
    $corresponding_sleeveLI.toggleClass("borderAround"); 
    }); 
    }); 
}); 

然後將其添加到您的CSS：

.borderAround{ 
    border:/*some border settings for when you have those border around*/; 
    transition:/*some transition settings if you wanna have any*/; 
} 

編輯

如果你想只有一個框強調你可以（在點擊EH，之後或之前toggleClass）時間：

var $otherB = $sleevesLI.not($corresponding_sleeveLI); 
$otherB.each(function(index, elem){ 
    var $this = $(this); 
    if($this.hasClass("borderAround")){ 
    $this.removeClass("borderAround"); 
    } 
});