演示

Question

我有一个元素列表（<li>），其中有两个特定的<li>共享一个类（.example），我想检查一下其中任何一个元素是否处于活动状态（类别为.active）（弹出式窗口）。

在切换类.active的click事件上，我添加了一个循环来检查是否有任何<li>元素都具有这两个类，但是我似乎无法使其正常工作。

$('ul li').click(function() {
    $(this).toggleClass('active');

    $("ul li").each(function() {
      if($(this).hasClass('example') && $(this).hasClass('active')){
          $('.pop-up').css("display", "block")
        } else {
          $('.pop-up').css("display", "none")
      }
    })
  });

如果其中一个或两个元素都具有.example和.active类，则应显示弹出窗口。

Answer 1

下面的示例随您所愿。

问题- 我认为您的代码的问题在于，根据定义，您的某些元素缺少类.example和.active，因此在您激活示例的情况下，它将显示模式，但将其再次隐藏为它遍历了所有其他列表项。

方法一-修改您的代码，使其效率更高一点，同时检查两个类li是否存在.active.example

方法二-更快一点，因为它假设对li.example元素的任何点击都应显示弹出窗口（这可能是您期望的用户体验，因为弹出窗口不太可能通过点击li的过程来关闭，而是通过其自己的关闭按钮或类似的按钮来关闭

@Hackbyrd提到-您可能希望将事件侦听器放置在父DOM元素上，因为您正在动态加载这些li元素（即，页面加载时不存在）。

我添加了一些样式来帮助说明发生了什么。 .active元素带有下划线。

让我知道这是否不是您想要的。

演示

// METHOD ONE
// Add click event to list items
$('ul li').click(function() {

  // Add active class to clicked list element
  $(this).toggleClass('active');

  // Check if .example.active exists
  // i.e. length of array is greater than 0
  if ($("ul li.example.active").length > 0) {
    $('.pop-up').css("display", "block")
  } else {
    $('.pop-up').css("display", "none")
  }

});


// METHOD TWO
// Add click event to second example
$('ul li.example2').click(function() {

  // Show pop-up
  // This assumes that .active class is not needed for any other reason
  // And that the modal is closed via a different method (i.e. a close button within the modal, which is typical for a modal)
  $('.pop-up').show();

});


// Shouldn't be necessary, your modal should have a closing method already
// Only for demo purposes
$("a.close-pop-up").click(function() {
  $('.pop-up').hide();
});

.pop-up {
  display: none;
  border: 1px solid black;
  padding: 20px;
}

.example {
  color: blue;
}

.example2 {
  color: green;
}

li.active {
  text-decoration: underline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>Not an example list item</li>
  <li class="example">An example list item</li>
  <li class="example2">An example list item - METHOD 2</li>
  <li class="example">An example list item</li>
  <li class="example2">An example list item - METHOD 2</li>
  <li>Not an example list item</li>
</ul>

<div class="pop-up">
  <p>Pop-up</p>
  <a class="close-pop-up">Close</a>
</div>

Answer 2

您可能遇到的另一个问题是ul和li元素是动态加载到DOM中的（这意味着它不是在加载页面时加载的，而是通过其他各种事件加载的）。

在这种情况下，您还需要在树中选择一个较高的父元素来附加事件监听器。

此外，就像前面的评论和答案一样，您可以大大缩短代码，但可以将其附加到文档中（或者父元素是在页面加载时加载到页面中的，我选择文档是因为可以看到您的HTML代码），这样无论您是否动态加载它，都不会造成任何影响。

$(document).on('click', 'ul li .example .active', function(e){ $('.pop-up').show(); })

Answer 3

您也可以使用此方法

showPopUp();

$('ul li.example').click(function() {
  if($(this).hasClass('active')) {
    $('ul li').removeClass('active');
  }else {
    $('ul li').removeClass('active');
    $(this).addClass('active');
  }
  
  showPopUp();
});

function showPopUp() {
  if($('ul li.example.active').length > 0) {
    $('.pop-up').show();
  }else {
    $('.pop-up').hide();
  }
}

.example {
  color: #808080;
  cursor: pointer;
}

.example.active {
  color: #222222;
  font-weight: 600;
}

.pop-up {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>Test</li>
  <li>Test 2</li>
  <li class="example">Test Example</li>
  <li>Test 3</li>
  <li class="example">Test 2 Example</li>
</ul>

<p class="pop-up">This is a Pop Up</p>

遍历元素列表以查看它们是否处于活动状态

3 个答案:

演示