Question

背景

我有一个由四个绝对定位的div“象限”组成的布局，如下所示：

div.quadrant#one    |     div.quadrant#two
height: 25%;        |     height: 25%;
width: 25%;         |     width: 25%;
                    |
__________________________________________

div.quadrant#three  |    div.quadrant#four
height: 25%;        |    height: 25%;
width: 25%;         |    width: 25%;
                    |

HTML 的

<div class="quadrant" id="one"></div>
<div class="quadrant" id="two"></div>
<div class="quadrant" id="three"></div>
<div class="quadrant" id="four"></div>

当点击一个象限时，我正在使用jQuery将.open或.closed的类添加到象限中，以使quadrant.open增长到95％宽度和100％高度以及{{ 1}}收缩至5％宽度和33.33％高度。这是代码：

quadrant.closed

我的那件作品没问题。 这是我难倒的地方：

问题

我还尝试使用$( 'div.quadrant' ).click(function() { $(this).addClass('open'); $(this).parent().children('div.quadrant').not('.open').addClass('closed'); });向三个.addClass元素添加另一个类，具体取决于它们是第一个div.closed，第二个还是第三个。{如果div是第一个类“已关闭”，我还想添加div.closed;如果是第二个，我想添加.top;如果是第三个，我想添加.middle。

我尝试使用.bottom，:eq(1)和:eq(2)来解决这个问题。 但是，它仅在点击:eq(3)或div#one时有效，之后div#two象限似乎没有受到影响。以下是该代码：< / p>

div.closed

这是一个JS Bin：http://jsbin.com/UJopeTo/1/edit?html,css,js,output

我链接这些功能的方式有问题吗？任何帮助表示赞赏！

Answer 1

您遇到的问题是您没有正确理解：eq（）选择器和.not（）函数正在做什么。

$(this).parent().children('div.quadrant:eq(1)').not('.open').addClass('top');
$(this).parent().children('div.quadrant:eq(2)').not('.open').addClass('middle');
$(this).parent().children('div.quadrant:eq(3)').not('.open').addClass('bottom');

您在jsbin链接中提供的代码中执行的操作是

选择标记中的第二个div.quadrant元素（即#two）
如果其类不是.open，请将.top类添加到其中
选择标记中的第三个div.quadrant元素（即#three）
如果它的类不是.open，则将.middle类添加到它
选择标记中的第四个div.quadrant元素（即#four）
如果其类不是.open，请将.bottom类添加到其中

我看到你想要做什么，但这不是最好的方法。这个问题的最佳解决方案是以可重复，更面向对象的方式处理问题，就像jfriend00建议的那样。

Answer 2

您可以创建jQuery对象，然后对jQuery对象中的不同项执行不同的操作，就像这样。

在我看来，你需要清理以前的状态（先前打开，关闭，顶部，中间，底部），如下所示：

$( '.quadrant' ).click(function() {  
    var self = $(this);

    // clear prior state
    var all = self.parent().find(".quadrant").removeClass("open closed top middle bottom");

    // mark the clicked on one as open
    self.addClass("open");

    // mark all other ones as closed
    var closed = all.not(this).addClass("closed");

    // now mark each closed one separately
    closed.eq(0).addClass("top");
    closed.eq(1).addClass("middle");
    closed.eq(2).addClass("bottom");
});

jQuery addClass到1st-3rd Matched Elements

2 个答案: