Jquery 选择器 - 我怎样才能确保它有效？

Question

I have some buttons, labelled logo1 - logo15 respectively.

There is another button called 'lets-go' that fires a function based on these buttons being selected - when you click a logo the class 'active'.

When there is no logo selected, I would like this button to not be in the DOM - and be hidden. At the moment, the 'active' class for the button brings it's opacity to 1.

I have this jquery statement at the moment.

  if (!$('.logo1, .logo2, .logo3, .logo4, .logo5, .logo6, .logo7, .logo8, .logo9, .logo10, .logo11, .logo12, .logo13, .logo14, .logo15').hasClass("active")) {
$('#lets-go').removeClass('active')};  

But it's not working.

This is an example of one of my logoX buttons:

$('.logo15').on('click', function(e) {
  $('.logo15').toggleClass("active");
  $('#b15').toggleClass('alive');
  $('#b15').toggleClass('zoomTarget');
  $('#b15').toggleClass('dead');
  $('#lets-go').addClass('active');
  $('#popoutLetsGo').addClass('expand');
  $('.instructions-arrow-2').addClass('hide')
});

On click, they apply the class of 'active' to let's go. But it doesn't remove it, ever. Just if you click any of the 15 buttons a new button appears, but if you deselect the button it's still there - and then the next screen is blank.

Can you see why it's not?

I am basically looking for: If none of these classes have the class of active, then make sure this id doesn't have the class of active either.

Answer 1

Consider the following:

if (!$("[class*='logo']").hasClass("active")) {
  $('#lets-go').removeClass('active')};
}

This looks at the Class attribute for a item starting with "logo" , so .logo3 would be one of those elements. But you may want to test each one.

$("[class*='logo']").each(function(i, el){
  if(!$(el).hasClass("active")){
      $('#lets-go').removeClass('active')};
    }
});

See More:

• https://api.jquery.com/attribute-contains-selector/
• https://api.jquery.com/each/#each-function

You can also use simplified classes to help group selectors. Consider the following.

 $(function() { $(".logo").click(function() { $(".logo.active").removeClass("active"); $(this).addClass("active"); $("#letsgo").prop("disabled", false); }); $("#letsgo").prop("disabled", true); })

 .logo { padding: .4em; border: 1px solid black; border-radius: 3px; margin: 3px; background: #eee; color: #999; }.active { background: white; color: black; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Make a Selection</p> <div class="logo item-1">Logo 1</div> <div class="logo item-2">Logo 2</div> <div class="logo item-3">Logo 3</div> <div class="logo item-4">Logo 4</div> <div class="logo item-5">Logo 5</div> <button id="letsgo">Let's Go!</button>