如何只更改click div项的颜色？

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

What I am going to do is set red color on click item and make others color to black everytime.

我要做的是在点击项目上设置红色,并使其他人每次都变成黑色。

How can I change my code to do that?

如何更改我的代码呢?

4 个解决方案

#1

Try this:

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

#2

The correct approach in my opinion is to have a class .selected

我认为正确的做法是选择一个班级

then do the following:

然后执行以下操作:



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

#3

You can make the children black and then color the other one red.

您可以让孩子们变黑,然后将另一个变成红色。

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

#4

You can also try this

你也可以试试这个

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

#1