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

你也可以尝试这个

int()

如何仅更改单击div项的颜色？

4 个答案: