jquery - 在 href CLICK 上更改 BG 部分

Question

我很想看看我是如何完成以下工作的:

当点击:类为“people”、“water”、“wind”或“shower”的 A Action :将“主页”的背景更改为与这些类对应的特定颜色

所以:如果我点击一个黄色的“人”，我希望整个页面也是黄色的。

我已经用这段代码试过了，并让它工作了，但我希望代码不那么具体，而且总体上更有用!我知道这是可以做到的，但我不知道它是怎么做到的哈哈...

例子:

$(document).ready(function() {
  $(".parent").click(function() { //add event to class
    $("#home").css("background-color", "black"); //change property
  });
});

.shower {
  background-color: #652D90;
}
.people {
  background-color: #29B473;
}
.water {
  background-color: #2B388F;
}
.city {
  background-color: #FAAF40;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="home">
  <section>
    <a href="#">
      <div class="parent city">
        <div class="child-hidden">City</div>
      </div>
    </a>
    <div class="parent water">
      <div class="child-hidden">Water</div>
    </div>
    <div class="parent people">
      <div class="child-hidden">People</div>
    </div>
    <div class="parent shower">
      <div class="child-hidden">Shower</div>
    </div>
  </section>

我尝试以它首先取消选择一个类，然后添加另一个类的方式进行操作，但我无法让它适用于这 4 种不同的颜色/类:/我知道你可以使用“this”来解决这个问题但是我不太清楚。

Answer 1

如果您使用自定义数据属性，可能会容易得多:

<section>
    <div class="parent city" data-color="#FAAF40">
        <div class="child-hidden">City</div>
    </div>
    <div class="parent water" data-color="#2B388F">
        <div class="child-hidden">Water</div>
    </div>      
    <div class="parent people" data-color="#29B473">
        <div class="child-hidden">People</div>
    </div>
    <div class="parent shower" data-color="#652D90">
        <div class="child-hidden">Shower</div>
    </div>  
</section>  

然后点击并分配这个属性:

$(document).ready(function(){
    $(".parent").click(function(){ //add event to class
        var color = $(this).data("color")
        $("#home").css("background-color", color); //change property
    });
});