如何只更改點擊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"); 
}); 
});