javascript - 显示具有已检查输入的数据属性对象的元素

Question

上面是一个复选框列表，简单开始吧。其中两个已被检查。然后，我在下面列出了我想要隐藏或显示的面板列表，具体取决于称为数据类别的面板数据属性数组是否包含 HR 或客户服务。

数据数组的示例:

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

问题:

根据我的检查，下面的 JS 似乎显示了最后选中的复选框的元素。例如，如果我最后单击“HR”，那么这将显示“HR”面板，而不是“客户服务”面板。

所以我想要向面板显示数据属性包括“客户服务”和“HR”。但是，如果数据属性没有“销售”，但有“客户服务”和“HR”，则检查“销售”。然后它将被隐藏。

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

});

总而言之，基本上，如果数据属性不包含选中的输入，则隐藏，否则如果所有选中的框确实存在，则显示面板。

我希望我已经解释了这一点。请留下评论以获取所需的更多信息。

**** 编辑 *****

复选框 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() {