0

背景

我有一个由四个绝对定位的 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% 的高度，并quadrant.closed缩小到 5% 的宽度和 33.33% 的高度。这是代码：

$( 'div.quadrant' ).click(function() {  
  $(this).addClass('open'); 
  $(this).parent().children('div.quadrant').not('.open').addClass('closed');  
});

我的那件工作没问题。这就是我难过的地方：

问题

我还尝试使用.addClass向三个div.closed元素添加另一个类，具体取决于它们是第一个div.closed、第二个还是第三个。如果 div 是第一个具有“关闭”类的 div，我还想添加.top; 如果是第二个，我想补充一下.middle；如果是第三个，我想添加.bottom.

我试图通过使用:eq(1),:eq(2)和:eq(3). 但是，它仅在单击div#one或被div#two单击时才有效，然后之后的div.closed象限似乎不会受到影响。这是代码：

$(this).parent().children('div.quadrant').not('.open').addClass('closed');
$(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');

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

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

4

2 回答 2

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 链接中提供的代码中执行的操作是

  1. 选择标签中的第二个 div.quadrant 元素（即#two）
  2. 如果其类不是 .open，则将 .top 类添加到它
  3. 选择标签内的第三个 div.quadrant 元素（即#three）
  4. 如果其类不是 .open，则将 .middle 类添加到它
  5. 选择标签内的第四个 div.quadrant 元素（即#four）
  6. 如果其类不是 .open，则将 .bottom 类添加到它

我明白你想做什么，但这不是最好的方法。这个问题的最佳解决方案是用一种可重复的、更面向对象的方法来解决这个问题，就像 jfriend00 建议的那样。

于 2013-10-21T00:18:10.703 回答
0

您可以像这样创建 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");
});
于 2013-10-20T23:51:42.993 回答