我对show / hide元素有一些问题。我在一个页面上有2个弹出窗口,如果另一个弹出窗口有类,我需要隐藏一个弹出窗口。 例如:
<body class="home">
<div class="popup main"></div>
<div class="popup"></div>
</body>
因此,如果 body.home 有 .main ,我只需要显示 .main 弹出窗口并隐藏或删除其他。弹出
我试过了
if ($('.home').find('.main')) {
$('.home').find('.main').show();
$('.home').find('.popup').remove();
}
但它不能正常工作,因为在某些原因我只有一个弹出块的代码
<body class="home">
<div class="popup"></div>
</body>
答案 0 :(得分:5)
试试这个,
if($(".popup").hasClass('main')){
$(".popup").hide();
$(".main").show();
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body class="home">
<div class="popup main">main</div>
<div class="popup">another</div>
</body>
&#13;
答案 1 :(得分:2)
$( '.home .popup' ).not( ".main" ).remove();
答案 2 :(得分:1)
你可能想要这样的东西:
$('.popup.main').length &&
$('.popup').show().not('.main').remove() ||
$('.popup').show();
以上代码基本上是一个&#34;快捷方式&#34;这个:
// if there's a popup with class .main:
if($('.popup.main').length){
// show it:
$('.popup.main').show();
// and remove the one without class .main:
$('.popup').not('.main').remove();
// else, if there's no popup with class .main:
}else{
// show the .popup:
$('.popup').show();
}
答案 3 :(得分:0)
查看hasClass()
if ($('.home .popup').hasClass('main')) {
$('.home .popup').hide();
$('.home .main').show();
}
这将隐藏所有弹出窗口,然后仅显示具有.main
类
修改强>
好吧,当.home只有一个孩子时不工作。
尝试使用css
.home .popup:not(.main) {
display: none;
}
.home .popup:only-child {
display: block !important;
}
使用此代码,您只需添加/删除.main
类来管理可见性
答案 4 :(得分:0)
如果您想显示/隐藏元素,请使用jQuery.hide()
或jQuery.show()
。如果你使用jQuery.remove()
,那么你就没有机会再次这样做,因为它已经从DOM树中删除了。