两个问题...
我有一组 DIVS，其中包含一些代码，旨在更改单击的 DIV 的颜色并将其他的重置为默认值。这很好用……但背景颜色是在 javascript 代码中指定的。当我尝试使用 CSS 类时，事情并没有按应有的方式工作。我怎样才能让第二个版本工作，以便它使用 css 类来指定颜色而不是 javascript。
我的第二个问题与
.parent()
代码的一部分以及在这种情况下实际做了什么？
任何帮助表示赞赏。
问问题
1338 次
9 回答
4
试试这个：
$('#container').on('click', 'div.button', function(){
$(this).addClass('on').siblings('.button').removeClass('on');
});
几点：
1) 任何时候您将同一个事件回调绑定到多个事件时，最好委托该事件。所以我将它委托给父容器，而不是将事件重复附加到每个元素。如果这对您来说是新的，请查看事件委托。
2）在您的原始代码中，parent()调用是一种上树然后返回的方法，基本上影响兄弟姐妹。我已将其更改为简单地使用siblings()。
3）我没有明确的“关闭”状态，而是将关闭状态设为默认值。然后，我们只需打开/关闭 on 状态 ( .on)
于 2012-08-21T12:26:03.500 回答
3
试试这个：
HTML：
<div id="container">
<div class="button on">1</div>
<div class="button off">1</div>
<div class="button off">1</div>
<div class="button off">1</div>
</div>
CSS：
#container {
position: absolute;
top: 0;
left: 0;
}
.button {
position: relative;
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid #333;
background: green;
}
.on {
background: red;
}
JS：
$('.button').click(function(){
$(this).siblings().removeClass('on');
$(this).addClass('on');
});
- 您不需要“关闭”类来获得这种效果。
- 此外，在这种情况下，最好使用“.siblings()”来查找它的兄弟姐妹，而不是“.parent().find()”。（它基本上更快/更精确）
于 2012-08-21T12:25:47.220 回答
2
.parent 选择您正在引用的 jQuery 对象的父元素。在这种情况下，它将是“#container”。
因此，“$(this).parent().find('.button')” 将返回“#container”元素内的所有“.button”元素，即所有按钮。
因此，您的 JavaScript 不会像您预期的那样工作。尝试以下操作：
$('.button').click(function(e){
$('.on').addClass('off'); // add '.off' to the one element that is '.on'
$('.on').removeClass('on'); // remove '.on' from this same element
$(e.target).addClass('on'); // add '.on' to the element clicked
$(e.target).removeClass('off'); //remove '.off' from that element clicked
currentSelected = this;
});
在这里，我将“e”作为参数添加到“click”函数中。然后我使用“e.target”来获取被点击的元素。我还确保 n 元素不会同时连接“.on”和“.off”，确保没有样式相互覆盖。
于 2012-08-21T12:52:27.440 回答
1
您可以将您的 javascript 代码更改为：
$('.button').click(function(){
$(this).parent().find('.button').addClass('off');
$(this).removeClass('off').addClass('on');
});
这又快又脏，但它有效
于 2012-08-21T12:24:50.413 回答
1
$('.button').click(function(){
$(this).parent().find('.button.on').removeClass('on').addClass('off');
$(this).removeClass('off').addClass('on');
});
于 2012-08-21T12:25:24.493 回答
1
您可以设置一个新类并使用 jQuery.toggleClass在它们之间切换。
于 2012-08-21T12:26:18.887 回答
1
于 2012-08-21T12:29:05.483 回答
1
或者很简单：
$('.button').click(function(){
$(this).addClass('on').siblings().removeClass('on');
});
</p>
于 2012-08-21T12:45:01.750 回答
0
由于 CSS 的特殊性，off 类被覆盖，所以就像其他人说的那样，您需要先删除 on 类。另外，你的意思是在你的css中使用background而不是和类？background-coloroffon
于 2012-08-21T12:27:13.447 回答