jQuery jquery在单击时更改div的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6096739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery change style of a div on click
提问by dana
I have a div, with a specific style(let's say a certain background).
我有一个具有特定样式的 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 的列表元素应用另一种特定样式（另一种背景类型）以应用于该 div 时，
If another area in a different element belonging to that div is clicked, the style should not change.
如果单击属于该 div 的不同元素中的另一个区域，则样式不应更改。
Is it possible using jquery? thank you!
可以使用jquery吗？谢谢你！
Edit:(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');
});
});
回答by Carls Jr.
As what I have understand on your question, this is what you want.
正如我对你的问题的理解，这就是你想要的。
Here is a jsFiddleof the below:
这是以下的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>回答by Vivek
回答by demas
$(document).ready(function() {
$('#div_one').bind('click', function() {
$('#div_two').addClass('large');
});
});
If I understood your question.
如果我理解你的问题。
Or you can modify css directly:
或者你可以直接修改css：
var $speech = $('div.speech');
var currentSize = $speech.css('fontSize');
$speech.css('fontSize', '10px');
回答by Guy
If I understand correctly you want to change the CSS style of an element by clicking an item in a ullist. Am I right?
如果我理解正确，您想通过单击ul列表中的项目来更改元素的 CSS 样式。我对吗？
HTML:
HTML：
<div class="results" style="background-color:Red;">
</div>
<ul class="colors-list">
<li>Red</li>
<li>Blue</li>
<li>#ffee99</li>
</ul>
jquery
查询
$('.colors-list li').click(function(e){
var color = $(this).text();
$('.results').css('background-color',color);
});
Note that jquery can use addClass, removeClassand toggleClassif you want to use classes rather than inline styling. This means that you can do something like that:
需要注意的是jQuery的可以使用addClass，removeClass而且toggleClass如果你想使用类，而不是内联样式。这意味着您可以执行以下操作：
$('.results').addClass('selected');
And define the 'selected' styling in the CSS.
并在 CSS 中定义“选定”样式。
Working example: http://jsfiddle.net/uuJmP/
工作示例：http: //jsfiddle.net/uuJmP/
