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

通过创建数组，我们可以＆＃34;同步＆＃34;两套箱子。

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

＆＃13;

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

＆＃13;

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

点击

2 个答案: