0

两个问题...

我有一组 DIVS，其中包含一些代码，旨在更改单击的 DIV 的颜色并将其他的重置为默认值。这很好用……但背景颜色是在 javascript 代码中指定的。当我尝试使用 CSS 类时，事情并没有按应有的方式工作。我怎样才能让第二个版本工作，以便它使用 css 类来指定颜色而不是 javascript。

我的第二个问题与

.parent()

代码的一部分以及在这种情况下实际做了什么？

任何帮助表示赞赏。

4

9 回答 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

试试这个：

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');
});
  1. 您不需要“关闭”类来获得这种效果。
  2. 此外，在这种情况下，最好使用“.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在它们之间切换。

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

于 2012-08-21T12:26:18.887 回答
1

上班，没时间解释，看看这个；

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

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

于 2012-08-21T12:29:05.483 回答
1

或者很简单：

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

$('.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 回答