Question

如何使用CSS显示条件添加和删除类。例如，我有一些可以隐藏和显示的Div。我想要的是，如果使用display:none;隐藏div，则删除div的类。

但是如果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并且具有相同的类，而所有幻灯片都使用相同的脚本运行。

如果我点击第二张幻灯片中的缩略图，则幻灯片显示不会移动。我意识到它只滑动了第一张幻灯片。

所以，解决方法是我必须删除幻灯片的类。

Answer 1

尝试可见：

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

Answer 2

这是你想要做的？

如果是这样，很容易将其转换为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

上

Answer 3

我认为你的代码有点工作。这是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');}
});

if循环是您所希望的。希望它有所帮助!!

如果display = none，则删除class

3 个答案: