Question

两个问题......

我有一组DIVS，其中包含一些代码，用于更改单击的DIV的颜色，并将其他DIV重置为默认值。 This works nicely ...但是在javascript代码中指定了背景颜色。当我尝试使用CSS类时，things didn't work as they should。如何使第二个版本工作，以便它使用css类来指定颜色而不是javascript。

我的第二个问题与

有关

.parent()

部分代码以及在此上下文中实际执行的操作？

感谢任何帮助。

Answer 1

试试这个：

$('#container').on('click', 'div.button', function(){
    $(this).addClass('on').siblings('.button').removeClass('on');
});

Updated Fiddle.

有些观点：

1）每当你将同一事件回调绑定到多个事件时，最好委托事件。所以我将它委托给父容器，而不是将事件重复附加到每个元素。如果这对您来说是新的，请查看事件委派。

2）在原始代码中，parent()调用是一种上升树然后返回的方法，基本上会影响兄弟姐妹。我已将此更改为仅使用siblings()。

3）我没有明确的“关闭”状态，而是将关闭状态设为默认状态。然后，我们只需打开/关闭开启状态（.on）

Answer 2

试试这个：

http://jsfiddle.net/HNXjQ/4/

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');
});

您不需要“off”类来获得此效果。
此外，在这种情况下，最好使用“.siblings（）”来查找它的兄弟姐妹而不是“.parent（）。find（）”。（它基本上更快/更精确）

Answer 3

.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”添加为“点击”功能的参数。然后我使用'e.target'来获取被点击的元素。我还确保n元素不会同时连接到'。''和'.off'，确保没有样式相互覆盖。

Answer 4

您可以将您的javascript代码更改为：

$('.button').click(function(){
    $(this).parent().find('.button').addClass('off');
    $(this).removeClass('off').addClass('on');
});

这很快又脏，但它有效

Answer 5

$('.button').click(function(){
    $(this).parent().find('.button.on').removeClass('on').addClass('off');
    $(this).removeClass('off').addClass('on');
});

Answer 6

您可以设置一个新类并使用jQuery的.toggleClass在它们之间切换。

http://jsfiddle.net/Kyle_Sevenoaks/HNXjQ/5/

Answer 7

在工作中，没时间解释，检查一下;

http://jsfiddle.net/HNXjQ/12/

如果你愿意，稍后会解释！

Answer 8

或者很简单：

http://jsfiddle.net/HNXjQ/14/

$('.button').click(function(){
    $(this).addClass('on').siblings().removeClass('on');
});

Answer 9

由于CSS的特殊性，异类被覆盖了，所以就像其他人所说的那样，你需要首先删除on class。另外，您的意思是在background和background-color类的css中使用off代替on吗？

单击时DIV样式更改

9 个答案: