使用JQuery单击DIV
我正面临着使用JQuery点击DIV的问题。在这个问题上需要建议。
我的html中有三个DIV元素，如下所示，
<html>
<body>
<div id="overviewContainer">
<div id="firstContainer"></div>
<div id="secondContainer"></div>
</div>
</body>
</html>我的要求是，
1)当我点击firstContainer时，secondContainer必须消失，我的firstContainer应该扩展并占据secondContainer的空间。
2)当我再次单击firstContainer时，secondContainer必须出现，我的firstContainer应该缩小到原来的位置，并为secondContainer留出空间。
为此，我编写了以下jQuery代码
$(function() {
var firstContainerMaximized = false;
alert("Jquery invoked");
$('#firstContainer').click(function(e) {
//var firstContainerMaximized = firstContainerMaximized;
alert("fist container clicked");
if( firstContainerMaximized == false ) {
alert("maximizing clicked");
firstContainerMaximized = true;
$('#secondContainer').hide(); //hide the 2nd container.
$(this).css({ //modify the 1st container
"right":"1%"
});
} else if( firstContainerMaximized == true ) {
alert("minimizing clicked");
firstContainerMaximized == false;
$('#secondContainer').show(); //show the 2nd container.
$(this).css({ //modify the 1st container
"right":"49%"
});
}
});
$('#secondContainer').click(function(e) {
alert("second container clicked");
});
});该逻辑适用于前2次单击。也就是说，当我第一次单击我的firstContainer时，变量firstContainerMaximized被设置为FALSE，并且我的firstContainer按预期展开。
当我第二次点击firstContainer时，变量firstContainerMaximized被设置为TRUE，并且我的firstContainer会像预期的那样缩小。
但是，当我从第三次单击firstContainer时，变量firstContainerMaximized总是设置为TRUE。它并没有像预期的那样再次扩张。
请告诉我哪里出了问题？
是否有其他可供选择的设计来满足我的要求？
回答 3
Stack Overflow用户
发布于 2014-10-04 14:24:30
如果您使用jQuery .bind()并通过添加和删除.class来控制“展开的内容”，将会更容易和更干净
所以你最终会有这样的结果
HTML
<body>
<div id="overviewContainer">
<div id="firstContainer">first container</div>
<div id="secondContainer">second container</div>
</div>
</body>CSS
#firstContainer{
background: orange;
padding: 20px;
height: 50%;
}
#secondContainer{
background: green;
padding:20px;
height: 50%;
}
#overviewContainer{
background: red;
height: 200px;
}
#firstContainer.maximized{
height:100%;
}JAVASCRIPT
$('#firstContainer').bind('click',function(e) {
var $firstContainer = $(this);
var $secondContainer = $('#secondContainer');
var $firstContainerMaximized = $('#firstContainer.maximized');
if( $firstContainerMaximized.length == 0 ) {
$secondContainer.hide(); //hide the 2nd container.
$firstContainer.addClass('maximized');
} else {
$secondContainer.show(); //show the 2nd container.
$firstContainer.removeClass('maximized');
}
});
$('#secondContainer').click(function(e) {
alert("second container clicked");
});这里还有一个使用小提琴工作代码的一个链接。我决定添加一些css，以使它更容易看到。
ps: Javascript仍然可以简化。
我希望它有帮助:)
Stack Overflow用户
发布于 2014-10-04 11:19:32
正如@kellycode所指出的，您不是使用赋值运算符=，而是使用条件运算符==，它的计算结果为true或false
所以，将firstContainerMaximized == false;更改为firstContainerMaximized = false;
Stack Overflow用户
发布于 2014-10-04 11:41:14
这是因为您没有正确地设置firstContainerMaximized变量。纠正一下就行了。
问题：firstContainerMaximized == false;
解决方案：firstContainerMaximized = false;
https://stackoverflow.com/questions/26192210
复制相似问题
腾讯云开发者
