Question

请考虑以下内容：

jQuery('document').ready(function($) {
  $('#num-locations input[type="checkbox"]').on('click', function(e) {
    if (e.target.checked) {
      dataId = e.target.dataset.location;
      console.log(dataId);
      $('.jobs-listing [data-city]').not('[data-city*="'+dataId+'"]').hide();
    } else {
      $('.jobs-listing [data-city]').show();
    }
  });
});

这是HTML的示例，其中可能有很多：

<div class="manage-wrapper  d-flex py-5 eachJob" data-city="Ottawa" data-province="Ontario">
    <div class="manage-text w-7">
        <h4 class="font-weight-bold mt-0 mb-1 job-title"></h4>
        <p class="job-description"></p>
    </div>
    <div class="manage-aside text-right w-3">
        <h4 class="font-weight-bold mt-0 mb-1 job-location">Ottawa</h4>
        <p class="mb-0 job-province">Ontario</p>
        <a href="#" class="btn btn-primary job-url" tabindex="-1">VIEW JOB</a>
    </div>
</div>

预期：仅在父div上应用无显示，在这种情况下为'.manage-wrapper'
实际：该页面上的所有内容均被隐藏，因为“ {display：none””适用于.manage-wrapper内的每次潜水，但不适用于{{1} }是自我。
当您单击该复选框时，没有控制台错误。

什么是正确的申请方式： .manage-wrapper应用于单击display: none与{不匹配时，类别为manage-wrapper的任何div {1}}？

[和]

当您取消选中上述复选框时，恢复“隐藏”元素的正确方法是什么？

Answer 1

稍有简化，但应该可以帮助您。

$('document').ready(function($) {
  $('#num-locations input[type=checkbox]').on('change', function() {
    $.each($('.manage-wrapper'), function(key, value) {
      if ($(value).data('location') != $(value).data('city')) {
        $(value).hide();
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="num-locations">
  <input type="checkbox" />
</div>
<div class="manage-wrapper  d-flex py-5 eachJob" data-city="Ottawa" data-province="Ontario">
  <div class="manage-text w-7">
    <h4 class="font-weight-bold mt-0 mb-1 job-title"></h4>
    <p class="job-description"></p>
  </div>
  <div class="manage-aside text-right w-3">
    <h4 class="font-weight-bold mt-0 mb-1 job-location">Ottawa</h4>
    <p class="mb-0 job-province">Ontario</p>
    <a href="#" class="btn btn-primary job-url" tabindex="-1">VIEW JOB</a>
  </div>
</div>

当data属性不匹配时隐藏元素的最佳方法是什么？

1 个答案: