Question

我使用的是手风琴，分为5个类别，显示了几行复选框。当访问者选中一个复选框时，它会返回每个类别所选复选框的数量。如果未选中任何复选框，则不会显示任何内容。例如。

Category 1: 2 checkboxes selected
Category 2: 1 checkboxes selected
Category 3:
Category 4: 10 checkboxes selected
Category 5:

这是有效的，所以当访问者在类别4中添加另一个时，它将显示“选择了11个复选框”。当一个人关闭时，它当然会显示“选中9个复选框”。

但是，95％的情况下都有效。当我随机单击复选框时，它有时会在日志中返回错误

Uncaught TypeError: undefined is not a function studiezoeker:487Request studiezoeker:487(anonymous function) studiezoeker:479v.event.dispatch ScriptResource.axd?d=dNZi6RW_20g0sp3isLHt5GoHGXYiqvO1u3-FU9wcgPXyQCu1rmFi0RuSIwIzaJjczNe7S8D3OTnoIX…:2o.handle.u

在这种情况下，计数器将被卡在任何地方。在此示例中，类别4将停留在10.但是，当我现在单击另一个时，结果再次正确。将显示所选的12个。

我搜索了几个小时，但我找不到它。

出错的Javascript部分。它在前4行中出错。

 $(".filtercontainer .accordionitem").each(function () {
                    $(".beefup-body [type='checkbox']", this).change(function () {
                        var count = $(this).parent().parent().parent().delay(100).find($("[type='checkbox']:checked")).length;

                        console.log(count);

                        $(this).parent().parent().parent().siblings("h2").find(".checkCount").text(count + " geselecteerd");
                        if (count == 0) {
                            $(this).parent().parent().parent().siblings("h2").find(".checkCount").hide();
                        }
                        else {
                            $(this).parent().parent().parent().siblings("h2").find(".checkCount").show();
                        }
                    });

HTML（删除所有复选框和所有类别，因此更易于阅读

<div class="filtercontainer">
  <div class="Accordion">
    <div class="AccordionInner">
      <article class="taxonomy accordionitem open" data-taxonomy="school" role="article">
        <h2 class="beefup-head">school <span class="checkCount">14 selected</span></h2>
        <div class="beefup-body" style="display: block;">
          <div class="columncount">
            <div class="taxa" title="ade08e3b-77bc-6478-97b6-ff00006ae40d" data-taxa-id="ade08e3b-77bc-6478-97b6-ff00006ae40d">
              <input id="ade08e3b-77bc-6478-97b6-ff00006ae40d" type="checkbox" name="ctl00$Content$C022$cbFilter">
              <label class="coverCheckBox" for="ade08e3b-77bc-6478-97b6-ff00006ae40d"><span></span></label>
              <span class="filterName">One checkbox as an example</span>
              <!-- More checkboxes below this one, upto 40 per category -->
            </div>
            <div class="taxa" title="afe08e3b-77bc-6478-97b6-ff00006ae40d" data-taxa-id="afe08e3b-77bc-6478-97b6-ff00006ae40d"></div>
          </div>
        </div>
      </article>
      <article class="taxonomy accordionitem" data-taxonomy="vorm" role="article">
        <h2 class="beefup-head">vorm <span class="checkCount"></span></h2>
        <div class="beefup-body" style="display: none;">
          <div class="columncount">
            <!-- Checkboxes in this category as well -->
          </div>
        </div>
      </article>
      <!-- More categories containing their own checkboxes here as well -->
    </div>
  </div>
</div>

复选框计数选中的复选框，有时会返回错误

0 个答案: