如何只更改点击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

可以使孩子黑，然后上色等一个红。

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

Answer 3

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

然后执行以下操作：

 


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

Answer 4

你也可以试试这个

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