如何仅更改Click div项目的颜色？

Question

 $(function(){ $("#title div").on("click", function(){ $(this).parent().css("color", "#000000"); $(this).css("color", "red"); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="title"> <div class="book-title lv1">A</div> <div class="book-title lv1">B</div> <div class="book-title lv1">C</div> <div class="book-title lv1">D</div> </div> 

我要做的是在点击项上设置红色，每次都将其他颜色设置为黑色。

如何更改我的代码来做到这一点？

Answer 1

尝试这个：

 $(function(){ $("#title div").on("click", function(){ $(this).siblings().css("color", "#000000"); $(this).css("color", "red"); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="title"> <div class="book-title lv1">A</div> <div class="book-title lv1">B</div> <div class="book-title lv1">C</div> <div class="book-title lv1">D</div> </div> 

Answer 2

在我看来，正确的做法是有一个类.selected

然后执行以下操作：

$(function(){
        $("#title div").on("click", function(){
          $(".selected").removeClass("selected");
          $(this).addClass("selected");
        });
      })

Answer 3

您可以使孩子变黑，然后使另一个变红。

$(function(){
    $("#title div").on("click", function(){
      $(this).parent().children('div').css("color", "#000000");
      $(this).css("color", "red");
    });
  })

Answer 4

您也可以尝试

$(function(){
$("#title div").on("click", function(){
  $(".book-title").css("color", "#000000");
  $(this).css("color", "red");
 });
});