如果display = none，则删除类

Question

How to add and remove class with the condition of CSS display. For example, I have some Div that can be hidden and shown. I want that, if the div is hidden with the display:none; , then the class of the div is removed.

But if the div is shown with the display:block; , I want to add a class to the div.

Here is what I have been trying:

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

---

---

---

EXPLANATION

I have multiple slideshows in one pages. Not all of the slideshow is going to be shown in the page, one of them will only show if the link to that slideshow is clicked. It sames like auto hide and show function. If one slideshow is shown, then other slideshows are hidden.

Each slideshow has their own thumbnails to control them.

The problem is all of the slideshow has no ID and has the same class, while all the slideshow is run with the same script.

If the thumbnail in the second slideshow I click, the slideshow doesn't move. And I realize it slides only the first slideshow.

SO, the solution is I have to remove the class of the slideshow.

Answer 1

Try is visible:

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

Answer 2

This is what you are trying to do?

If so, it's easy to convert it to jquery syntax instead.

It would be easier if you had provided a jsFiddle of your problem.

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);

On jsFiddle

Answer 3

I think your code is somewhat working. Here is a fiddle where I have shown and hidden on the click of the buttons.

Code Snippet:

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

The if loops are as desired by you. Hope it helps!!