如果display = none，則刪除class

如何使用CSS display的條件添加和刪除class。例如，我有一些可以隱藏和顯示的Div。我想要的是，如果div與display:none;隱藏，那麼div的類將被刪除。如果display = none，則刪除class

但是，如果div與display:block;一起顯示，我想向div中添加一個類。

這是我一直在努力：

$(document).ready(function(){ 
     if($('.bigPicture').css('display') == 'block') 
      {$('.bigPicture').find('div').addClass('easyzoom easyzoom--overlay');}; 

     if($('.bigPicture').css('display') == 'none') 
      {$('.bigPicture').find('div').removeClass('easyzoom easyzoom--overlay');} 
    });

說明

我有一個頁面多個幻燈片。不是所有的幻燈片都會顯示在頁面中，其中一個只會顯示是否點擊了該幻燈片的鏈接。它就像自動隱藏和顯示功能一樣。如果顯示一個幻燈片，則隱藏其他幻燈片。

每個幻燈片都有自己的縮略圖來控制它們。

問題是所有幻燈片都沒有ID並且具有相同的類，而所有的幻燈片都使用相同的腳本運行。

如果第二張幻燈片中的縮略圖單擊，則幻燈片不會移動。我意識到它只能幻燈片放映。

因此，解決方法是我必須刪除幻燈片的類。

來源

2014-07-15 inandout

顯示不是CSS樣式...它的一個屬性。 – Glegan

你得到的錯誤是什麼？ – V31

你爲什麼要這樣做？ – Xotic750

這是什麼你想幹什麼？

如果是這樣，很容易將其轉換爲jQuery語法。

如果您提供了問題的jsFiddle，會更容易。

CSS

.bigPicture { 
    width: 50px; 
    height: 20px; 
    border-style: solid; 
    border-width: 2px; 
} 
.hidden { 
    display: none; 
} 
.easyzoom { 
    background-color: red; 
}

HTML

<div class="bigPicture"> 
    <div>One</div> 
</div> 
<div class="bigPicture hidden"> 
    <div class="easyzoom easyzoom--overlay">Two</div> 
</div> 
<div class="bigPicture hidden"> 
    <div class="easyzoom easyzoom--overlay">Three</div> 
</div>

的Javascript

document.addEventListener('load', function() { 
    Array.prototype.forEach.call(document.querySelectorAll('.bigPicture'), function (bigPicture) { 
     var div = bigPicture.querySelector('div:first-of-type'); 

     if (div) { 
      if (window.getComputedStyle(bigPicture).display === 'none') { 
       div.classList.remove('easyzoom', 'easyzoom--overlay'); 
      } else { 
       div.classList.add('easyzoom', 'easyzoom--overlay'); 
      } 
     } 
    }); 
}, true);

在jsFiddle

來源

2014-07-15 19:45:48 Xotic750

嘗試可見：

$(document).ready(function(){ 
    if($('.bigPicture').is(':visible')){ 
     $('.bigPicture').find('div').addClass('easyzoom easyzoom--overlay'); 
    } else { 
     $('.bigPicture').find('div').removeClass('easyzoom'); 
    } 
});

來源

2014-07-15 18:59:33 DNACode

它仍然無法正常工作。即使顯示器沒有，班級仍然在那裏。 – inandout

我覺得你的代碼是有點工作。這裏是一個fiddle，我已經顯示和隱藏點擊按鈕。

代碼段：

$(document).on('click','#addBigPicture',function(){ 
    $('.bigPicture').css('display','block'); 
    if($('.bigPicture').css('display') == 'block') 
     {$('.bigPicture').find('div').addClass('easyzoom easyzoom--overlay');}; 
}); 

$(document).on('click','#hideBigPicture',function(){ 
    $('.bigPicture').css('display','none'); 
    if($('.bigPicture').css('display') == 'none') 
     {$('.bigPicture').find('div').removeClass('easyzoom easyzoom--overlay');} 
});

的，如果迴路根據需要由你。希望能幫助到你！！

來源

2014-07-15 19:57:32 V31

如果display = none，則刪除class

回答

相關問題