jquery改变div的样式点击 [英] jquery change style of a div on click

问题描述

我有一个div，有一个特定的样式（让我们说一定的背景）。

I have a div, with a specific style(let's say a certain background).

我想要的是，当一个人点击列表元素有div应用要应用于该div的另一种特定样式（另一种背景类型），

What I want is, when one clicks on a list element having that div applied another specific style (another background type) to be applied to that div,

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

If another area in a different element belonging to that div is clicked, the style should not change.

是否可以使用jquery？谢谢！

Is it possible using jquery? thank you!

编辑（我的功能也做了一些其他事情，但变化的颜色不工作，所有项目的背景，我点击，不仅最后点击。）

(my function does some other things also. but the changing color doesn;t work as i want. it changes the background of all items i click, not only the last clicked.)

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

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

推荐答案

正如我对你的问题所了解，

As what I have understand on your question, this is what you want.

以下是 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>

这篇关于jquery改变div的样式点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！