如果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

回答

相关问题