Question

我对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>

Answer 1

试试这个，

＆＃13;

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;

Answer 2

$( '.home .popup' ).not( ".main" ).remove();

Answer 3

你可能想要这样的东西：

$('.popup.main').length && 
$('.popup').show().not('.main').remove() || 
$('.popup').show();

JSFiddle

以上代码基本上是一个＆＃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();
}

Answer 4

查看hasClass()

if ($('.home .popup').hasClass('main')) {
  $('.home .popup').hide();
  $('.home .main').show();
}

这将隐藏所有弹出窗口，然后仅显示具有.main类

的弹出窗口

Working pen

修改

好吧，当.home只有一个孩子时不工作。尝试使用css
解决此问题
.home .popup:not(.main) { display: none; } .home .popup:only-child { display: block !important; }

使用此代码，您只需添加/删除.main类来管理可见性

Working pen with css

Answer 5

如果您想显示/隐藏元素，请使用jQuery.hide()或jQuery.show()。如果你使用jQuery.remove()，那么你就没有机会再次这样做，因为它已经从DOM树中删除了。

jQuery只有在有类时才显示div

5 个答案: