Question

上面是复选框列表，简单的开始吧。其中两个被检查。我接下来有一个面板列表，我想隐藏或显示，这取决于面板数据attr数组称为数据类别是否包含HR或客户服务。

数据数组的一个例子：

["Legal and Regulatory","Marketing","HR","Cusomer Service"]

问题：

我检查下面的JS似乎显示的元素是最后一个选中的复选框。例如，如果我点击了＃34; HR＆＃34;最后，这将显示＆＃34; HR＆＃34;而不是＆＃34;客户服务＆＃34;太

所以我想要的是显示数据attr包括＆＃34;客户服务＆＃34;和＆＃34; HR＆＃34;。但是，如果数据attr没有例如＆＃34; Sales＆＃34;但确实有＆＃34;客户服务＆＃34;和＆＃34; HR＆＃34;和＆＃34;销售＆＃34;被检查了。它将被隐藏。

$('.checkbox').on('change', function() {
  $('.pagination, .callout').hide();

  $('.checkbox:checked').each(function() {
    var checkboxName = $(this).val();

    $('.callout').hide().each(function() {
      var calloutArray = $(this).data();

      if (calloutArray.category.indexOf(checkboxName) !== -1) {
        $(this).show();
      }
    });
  });

  var countChecked = $('.checkbox').filter(':checked').length;

  if (countChecked === 0) {
    $('.callout').show();
    $('.pagination').show();

    pagination();
  }

});

总结一下，基本上如果数据attr不包含已检查的输入，则隐藏，否则如果所有选中的复选框都存在则显示该面板。

我希望我已解释过这一点。请留下评论以获取所需的进一步信息。

****编辑*****

复选框HTML：

<ul class="category-filters">
    <li>
        <label><input class="checkbox" value="Customer Service" type="checkbox">Customer Service</label>
    </li>
    <li>
        <label><input class="checkbox" value="Finance" type="checkbox">Finance</label>
    </li>
    <li>
        <label><input class="checkbox" value="HR" type="checkbox">HR</label>
    </li>
    <li>
        <label><input class="checkbox" value="Legal and Regulatory" type="checkbox">Legal and Regulatory</label>
    </li>
    <li>
        <label><input class="checkbox" value="Marketing" type="checkbox">Marketing</label>
    </li>
    <li>
        <label><input class="checkbox" value="Operations" type="checkbox">Operations</label>
    </li>
    <li>
        <label><input class="checkbox" value="Risk Management" type="checkbox">Risk Management</label>
    </li>
    <li>
        <label><input class="checkbox" value="Sales" type="checkbox">Sales</label>
    </li>
    <li>
        <label><input class="checkbox" value="Technology" type="checkbox">Technology</label>
    </li>           
</ul>

这些是小组：

<div style="display: none;" class="callout horizontal word-wrap" data-category="[&quot;Customer Service&quot;,&quot;HR&quot;,&quot;Operations&quot;,&quot;Risk Management&quot;,&quot;Technology&quot;]">

    <img src="http://localhost/vallum/wp-content/uploads/2016/07/David-King.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="David-King" srcset="http://localhost/vallum/wp-content/uploads/2016/07/David-King.jpg 480w, http://localhost/vallum/wp-content/uploads/2016/07/David-King-277x300.jpg 277w" sizes="(max-width: 639px) 98vw, (max-width: 1199px) 64vw, 480px">
    <h5>David King</h5>
    <p>With over 19 year’s experience of working</p>

</div>

Answer 1

您的问题是您正在循环复选框并隐藏每个复选框迭代的所有面板，这将撤消上一个复选框迭代的工作。

$('.callout').hide().each(function() {

是你的问题。在循环复选框之前，您已经隐藏了所有面板，因此只需删除隐藏：

$('.callout').each(function() {

使用选中的输入显示具有数据attr对象的元素

1 个答案: