无法捕获每个语句先前在click事件中定义内的检查状态是/否

问题描述

这是我的代码，因此您已经可以猜出我的问题：

const solutionChecks = $('#solution-checks :checkBox');
const searchFire = $('.search h6');
const solutionForm = $('#solution-checks');

solutionChecks.click(function() {
  $("div[data-category]").hide();
  var showAll;
  if (solutionChecks.is(":checked")) {
    var showAll = true;
  } else {
    var showAll = false;
  }
  
  solutionChecks.find("input").add(':checked').each(function() {
    if (solutionChecks.find("input").add(':checked').length == null) {
      $("div[data-category]").show();
    }
    
    $("div[data-category*=" + $(this).val() +"]").show();
  });
});

searchFire.click(function() {
  $(this).next('.absolute').toggleClass('show');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container-md search">
  <div class="row">
    <div class="col-md-4">
      <h6>Selection</h6>
      <div class="absolute">
        <form id="solution-checks">

          <label>
            <input type="checkBox" name="Businesses" value="Businesses" id="Businesses"> Businesses                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkBox" name="Accountancy" value="Accountancy" id="Accountancy"> Accountancy                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkBox" name="Banks" value="Banks" id="Banks"> Banks                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkBox" name="Partners" value="Partners" id="Partners"> Partners                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkBox" name="Developers" value="Developers" id="Developers"> Developers                
            <span class="checkmark"></span>
          </label>
          <br>
        </form>
      </div>
    </div>
  </div>
  
</div>

<div class="container-md px-0 solutions">
  <div class="row">
    <div class="col-md-4" data-category="Accountancy">

      <div class="h-100">

        <h3>Something</h3>
        <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Vivamus cursus scelerisque erat. </p>

        <a href="#" class="btn-secondary">Learn more</a>
      </div>
    </div>

    <div class="col-md-4" data-category="Partners">

      <div class="h-100">

        <h3>Something</h3>
        <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Vivamus cursus scelerisque erat. </p>

        <a href="#" class="btn-secondary">Learn more</a>
      </div>
    </div>

    <div class="col-md-4" data-category="Accountancy">

      <div class="h-100">

        <h3>Something</h3>
        <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Vivamus cursus scelerisque erat. </p>

        <a href="#" class="btn-secondary">Learn more</a>
      </div>
    </div>

  </div>
</div>

因此，问题很容易：我正在基于复选框构建搜索过滤器。

如果您根据选择检查一个或多个输入，则未选择选择器的框将消失，但一个或多个选择器将保留在那里。

我正在使用jquery和一个click事件来触发系统。但是问题是，如果您不选择任何选项，将会发生什么。本质上，由于您将在触发事件（单击）后立即隐藏所有内容，因此所有框都将保持隐藏状态。在我的代码中，我创建了一个if语句，希望能够捕捉到真假状态，但不幸的是，它没有用。之所以不起作用，是因为以下原因：在遍历所有元素之前，我可以捕获状态（输入的真/假），但是在此之后，我将只能捕获状态。真实的陈述。

之所以这样说，是因为我试图在每个函数中创建一个if语句来捕获选中的选择器的长度：

if (solutionChecks.find("input").add(':checked')).length == 0){}

之所以不起作用，是因为就像我说的那样，由于某种原因，在每个语句中，我的变量showAll不起作用。我试图将变量放入每个语句内，但它也不起作用，仅在每个语句外起作用。

我的问题是：如何获取点击状态？

谢谢

解决方法

您可以添加简单的检查以查看是否未选择类别。如果不 选择了类别，显示所有div的

// check if no categories are selected
if ($('#solution-checks :checkbox:checked').length == 0) {
    // show all categories
    $("div[data-category]").show();
}

这是您的代码段的更新版本，其中添加了支票

const solutionChecks = $('#solution-checks :checkbox');
const searchFire = $('.search h6');
const solutionForm = $('#solution-checks');

solutionChecks.click(function() {
  $("div[data-category]").hide();
  
  // check if no categories are selected
  if ($('#solution-checks :checkbox:checked').length == 0) {
      // show all categories
      $("div[data-category]").show();
      return;
  }
  
  solutionChecks.find("input").add(':checked').each(function() {
    if (solutionChecks.find("input").add(':checked').length == null) {
      $("div[data-category]").show();
    }
    
    $("div[data-category*=" + $(this).val() +"]").show();
  });
});

searchFire.click(function() {
  $(this).next('.absolute').toggleClass('show');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container-md search">
  <div class="row">
    <div class="col-md-4">
      <h6>Selection</h6>
      <div class="absolute">
        <form id="solution-checks">

          <label>
            <input type="checkbox" name="Businesses" value="Businesses" id="Businesses"> Businesses                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkbox" name="Accountancy" value="Accountancy" id="Accountancy"> Accountancy                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkbox" name="Banks" value="Banks" id="Banks"> Banks                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkbox" name="Partners" value="Partners" id="Partners"> Partners                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkbox" name="Developers" value="Developers" id="Developers"> Developers                
            <span class="checkmark"></span>
          </label>
          <br>
        </form>
      </div>
    </div>
  </div>
  
</div>

<div class="container-md px-0 solutions">
  <div class="row">
    <div class="col-md-4" data-category="Accountancy">

      <div class="h-100">

        <h3>Something</h3>
        <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Vivamus cursus scelerisque erat. </p>

        <a href="#" class="btn-secondary">Learn more</a>
      </div>
    </div>

    <div class="col-md-4" data-category="Partners">

      <div class="h-100">

        <h3>Something</h3>
        <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Vivamus cursus scelerisque erat. </p>

        <a href="#" class="btn-secondary">Learn more</a>
      </div>
    </div>

    <div class="col-md-4" data-category="Accountancy">

      <div class="h-100">

        <h3>Something</h3>
        <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Vivamus cursus scelerisque erat. </p>

        <a href="#" class="btn-secondary">Learn more</a>
      </div>
    </div>

  </div>
</div>

,

看看这个。你太努力了

const $solutionChecks = $('#solution-checks :checkbox');
const $searchFire = $('.search h6');
const $solutionForm = $('#solution-checks');

$solutionChecks.on("click",function() {
  const $checked = $solutionForm.find(":checked"); // not solutionChecks
  if ($checked.length === 0) { // nothing checked
    $("div[data-category]").show(); // show all
    return; // stop looking further
  }
  $("div[data-category]").hide(); // hide all
  $checked.each(function() {
    const val = $(this).val();
    $(`div[data-category^=${val}]`).show(); // show only checked
  });
});
// not part of the problem
$searchFire.on("click",function() {
  $(this).next('.absolute').toggleClass('show');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container-md search">
  <div class="row">
    <div class="col-md-4">
      <h6>Selection</h6>
      <div class="absolute">
        <form id="solution-checks">

          <label>
            <input type="checkbox" name="Businesses" value="Businesses" id="Businesses"> Businesses                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkbox" name="Accountancy" value="Accountancy" id="Accountancy"> Accountancy                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkbox" name="Banks" value="Banks" id="Banks"> Banks                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkbox" name="Partners" value="Partners" id="Partners"> Partners                
            <span class="checkmark"></span>
          </label>
          <br>
          <label>
            <input type="checkbox" name="Developers" value="Developers" id="Developers"> Developers                
            <span class="checkmark"></span>
          </label>
          <br>
        </form>
      </div>
    </div>
  </div>

</div>

<div class="container-md px-0 solutions">
  <div class="row">
    <div class="col-md-4" data-category="Accountancy">Accountancy

      <div class="h-100">

        <h3>Something</h3>
        <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Vivamus cursus scelerisque erat. </p>

        <a href="#" class="btn-secondary">Learn more</a>
      </div>
    </div>

    <div class="col-md-4" data-category="Partners">Partners

      <div class="h-100">

        <h3>Something</h3>
        <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Vivamus cursus scelerisque erat. </p>

        <a href="#" class="btn-secondary">Learn more</a>
      </div>
    </div>

    <div class="col-md-4" data-category="Accountancy">More Accountancy

      <div class="h-100">

        <h3>Something</h3>
        <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Vivamus cursus scelerisque erat. </p>

        <a href="#" class="btn-secondary">Learn more</a>
      </div>
    </div>

  </div>
</div>