jQuery只有在有类时才显示div

时间:2015-08-21 12:44:22

标签: javascript jquery html css

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

5 个答案:

答案 0 :(得分:5)

试试这个,

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:2)

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

答案 2 :(得分:1)

你可能想要这样的东西:

$('.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();
}

答案 3 :(得分:0)

查看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

答案 4 :(得分:0)

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