Jquery 選擇器 - 我怎樣才能確保它有效？

Question

我有一些按鈕，分別標記為 logo1 - logo15。

還有一個名為“lets-go”的按鈕會根據這些按鈕的選擇觸發 function - 當您單擊徽標時，class 會“活動”。

當沒有選擇徽標時，我希望此按鈕不在 DOM 中 - 並被隱藏。 目前，按鈕的“活動” class 將其不透明度設為 1。

我現在有這個 jquery 聲明。

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

但它不起作用。

這是我的 logoX 按鈕之一的示例：

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

單擊時，他們將“活動”的 class 應用於 go。 但它永遠不會刪除它。 只要您單擊 15 個按鈕中的任何一個，就會出現一個新按鈕，但如果您取消選擇該按鈕，它仍然存在 - 然后下一個屏幕是空白的。

你能明白為什么不是嗎？

我基本上在尋找：如果這些類都沒有活動的 class，那么請確保這個 id 也沒有活動的 class。

Answer 1

考慮以下：

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

這會查看以"logo"開頭的項目的 Class 屬性，因此.logo3將是這些元素之一。 但你可能想測試每一個。

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

看更多：

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

您還可以使用簡化的類來幫助分組選擇器。 考慮以下。

 $(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>