jquery在点击时更改div的样式

Question

我有一个 div，具有特定的样式(比如说特定的背景)。

我想要的是，当点击一个列表元素时，该 div 应用了另一种特定样式(另一种背景类型)以应用于该 div，

如果单击属于该 div 的不同元素中的另一个区域，则样式不应更改。

是否可以使用 jquery？谢谢!

编辑:(我的功能还做了一些其他事情。但是改变颜色并没有像我想要的那样工作。它改变了我点击的所有元素的背景，而不仅仅是最后点击的。)

$(document).ready(function() {
    $('.product_types > li').click(function() {
        $(this)
        .css('backgroundColor','#EE178C')
        .siblings()
        .css('backgroundColor','#ffffff');

        $('#submit_button').removeAttr('disabled');
        $('#number').removeAttr('disabled');
    });
});

Answer 1

根据我对你的问题的理解，这就是你想要的。

这是一个jsFiddle以下:

$('.childDiv').click(function() {
  $(this).parent().find('.childDiv').css('background-color', '#ffffff');
  $(this).css('background-color', '#ff0000');
});

.parentDiv {
  border: 1px solid black;
  padding: 10px;
  width: 80px;
  margin: 5px;
  display: relative;
}
.childDiv {
  border: 1px solid blue;
  height: 50px;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div id="divParent1" class="parentDiv">
  Group 1
  <div id="child1" class="childDiv">
    Child 1
  </div>
  <div id="child2" class="childDiv">
    Child 2
  </div>
</div>
<div id="divParent2" class="parentDiv">
  Group 2
  <div id="child1" class="childDiv">
    Child 1
  </div>
  <div id="child2" class="childDiv">
    Child 2
  </div>
</div>