CODEWITHSUNDEEP
jqueryhtml
TheWebs
TheWebs

Reputation: 12923

Whats the best way to hide elements when the data attribute doesn't match?

Consider the following:

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

Here's an example of the HTML, there could be tons of these:

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

Whats the proper way to apply: display: none to any div with a class manage-wrapper upon click when the data-location does not match the data-city?

[And]

When You uncheck said checkbox, whats the proper way to restore the "hidden" elements?

Upvotes: 0

Views: 268

Answers (1)

mbunch
mbunch

Reputation: 569

Slightly simplified, but should get you going.

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

Upvotes: 1

Related Questions