Question

这似乎是一个奇怪的问题，但请看看我的代码：

＆＃13;

$(window).load(function() {
  $('.zichtbaar').addClass('verborgen').removeClass('zichtbaar');
  $('#zoekitem').focus();

  $('.letter').on('click', function() {
    $('.zichtbaar').addClass('verborgen').removeClass('zichtbaar');
    var letter = $(this).text();
    var klasse = "letter-" + letter;
    var el = $('.' + klasse);
    $('#alfabet-header').html(letter).addClass('zichtbaar').removeClass('verborgen');
    el.addClass('zichtbaar').removeClass('verborgen');
  });

  $('#zoekitem').on('click', function() {
    $(this).val('');
    var zoekwoord = '';
  });

  $('button').on('click', function() {
    $('.zichtbaar').addClass('verborgen').removeClass('zichtbaar');
    $('#zoek-header').html('Zoekresultaten voor:');
    $('#zoek-header').addClass('verborgen').removeClass('zichtbaar');

    var zoekwoord = $('#zoekitem').val().toLowerCase();
    var lengte = zoekwoord.length;
    if (lengte > 0) {
      $('#zoek-header').append(" " + zoekwoord);
      $('#zoek-header').addClass('zichtbaar').removeClass('verborgen');

      var nGevonden = 0;
      $('.inhoud').each(function() {
        var el = $(this);
        var gevondenTekst = el.data('zoekwoorden').toLowerCase();

        if (gevondenTekst.search(zoekwoord) > -1) {
          nGevonden++;
          el.addClass('zichtbaar').removeClass('verborgen');
        }
      });

      alert(nGevonden);

      if (nGevonden === 0) {
        $('.niets-gevonden').addClass('zichtbaar').removeClass('verborgen');
      }
    }
    zoekwoord = '';
    $('#zoekitem').val('');
  });
});

＆＃13;

#zoekitem {
  font-size: 1.3em;
}
#letter-header {
  height: 32px;
  color: royalblue;
  font-size: 1.5em;
  font-weight: bold;
  overflow: hidden;
}
.letter {
  float: left;
  width: 3.7037037037037%;
  cursor: pointer;
  text-align: center;
}
#alfabet-header,
#zoek-header {
  font-size: 3em;
  font-weight: bold;
}
#zoek-header {
  margin-bottom: 5px;
}
.inhoud {
  margin-left: 10%
}
.verborgen {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="zoekitem" />
<button type="button">Zoek</button><br/><br/>
<div id="letter-header">
  <div class="letter">A</div>
  <div class="letter">B</div>
  <div class="letter">C</div>
  <div class="letter">D</div>
  <div class="letter">E</div>
  <div class="letter">F</div>
  <div class="letter">G</div>
  <div class="letter">H</div>
  <div class="letter">I</div>
  <div class="letter">J</div>
  <div class="letter">K</div>
  <div class="letter">L</div>
  <div class="letter">M</div>
  <div class="letter">N</div>
  <div class="letter">O</div>
  <div class="letter">P</div>
  <div class="letter">Q</div>
  <div class="letter">R</div>
  <div class="letter">S</div>
  <div class="letter">T</div>
  <div class="letter">U</div>
  <div class="letter">V</div>
  <div class="letter">W</div>
  <div class="letter">X</div>
  <div class="letter">Y</div>
  <div class="letter">Z</div>
  <div class="letter">0-9</div>
</div>
<br/>
<div id="resultaten">
  <div id="alfabet-header"></div>
  <div id="zoek-header" class="verborgen">Zoekresultaten voor:</div>

  <div class="inhoud letter-A verborgen" data-zoekwoorden="appels fruit boom">
    <a href="www.appels.com" target="_blank">Appels</a>
  </div>
  <div class="inhoud letter-B verborgen" data-zoekwoorden="boerenkool groente kruid">
    <a href="www.boerenkool.com" target="_blank">Boerenkool)</a>
  </div>
  <div class="inhoud letter-B verborgen" data-zoekwoorden="bonen groente struik bruin wit">
    <a href="www.bonen.com" target="_blank">Bonen</a>
  </div>
  <div class="inhoud letter-C verborgen" data-zoekwoorden="citrus fruit boom sinaasappel citroen limoen">
    <a href="www.citrus.com" target="_blank">Citrus</a>
  </div>
  <div class="inhoud niets-gevonden verborgen">Niets gevonden</div>
</div>

＆＃13;

这个脚本永远不会在$（＆＃39; .inhoud＆＃39;）每个函数之后执行代码。我不明白为什么。

更令我惊讶的是，当我更换第28行时：

var gevondenTekst = el.data('zoekwoorden').toLowerCase();

with：

var gevondenTekst = el.text().toLowerCase();

代码确实执行。

当然，文本不是数据的替代品。有人知道这里发生了什么吗？

Answer 1

您的each()循环始终处于执行状态，除了读取其值之外，data()或text()之间没有逻辑差异。

您的问题仅仅是因为并非所有.verborgen元素都具有data属性。因此，当您尝试阅读时，它是undefined。在toLowerCase()值上调用search()或undefined会引发错误，您可以在控制台中看到该错误。 text()有效，因为所有这些元素都有一个innerText值。

要解决此问题，请为data属性提供检索默认值，如下所示：

var gevondenTekst = (el.data('zoekwoorden') || '').toLowerCase();

＆＃13;

$(window).load(function() {
  $('.zichtbaar').addClass('verborgen').removeClass('zichtbaar');
  $('#zoekitem').focus();

  $('.letter').on('click', function() {
    $('.zichtbaar').addClass('verborgen').removeClass('zichtbaar');
    var letter = $(this).text();
    var klasse = "letter-" + letter;
    var el = $('.' + klasse);
    $('#alfabet-header').html(letter).addClass('zichtbaar').removeClass('verborgen');
    el.addClass('zichtbaar').removeClass('verborgen');
  });

  $('#zoekitem').on('click', function() {
    $(this).val('');
    var zoekwoord = '';
  });

  $('button').on('click', function() {
    $('.zichtbaar').addClass('verborgen').removeClass('zichtbaar');
    $('#zoek-header').html('Zoekresultaten voor:');
    $('#zoek-header').addClass('verborgen').removeClass('zichtbaar');

    var zoekwoord = $('#zoekitem').val().toLowerCase();
    var lengte = zoekwoord.length;
    if (lengte > 0) {
      $('#zoek-header').append(" " + zoekwoord);
      $('#zoek-header').addClass('zichtbaar').removeClass('verborgen');

      var nGevonden = 0;
      $('.inhoud').each(function() {
        var el = $(this);
        var gevondenTekst = (el.data('zoekwoorden') || '').toLowerCase();

        if (gevondenTekst.search(zoekwoord) > -1) {
          nGevonden++;
          el.addClass('zichtbaar').removeClass('verborgen');
        }
      });

      alert(nGevonden);

      if (nGevonden === 0) {
        $('.niets-gevonden').addClass('zichtbaar').removeClass('verborgen');
      }
    }
    zoekwoord = '';
    $('#zoekitem').val('');
  });
});

＆＃13;

#zoekitem {
  font-size: 1.3em;
}
#letter-header {
  height: 32px;
  color: royalblue;
  font-size: 1.5em;
  font-weight: bold;
  overflow: hidden;
}
.letter {
  float: left;
  width: 3.7037037037037%;
  cursor: pointer;
  text-align: center;
}
#alfabet-header,
#zoek-header {
  font-size: 3em;
  font-weight: bold;
}
#zoek-header {
  margin-bottom: 5px;
}
.inhoud {
  margin-left: 10%
}
.verborgen {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="zoekitem" />
<button type="button">Zoek</button><br/><br/>
<div id="letter-header">
  <div class="letter">A</div>
  <div class="letter">B</div>
  <div class="letter">C</div>
  <div class="letter">D</div>
  <div class="letter">E</div>
  <div class="letter">F</div>
  <div class="letter">G</div>
  <div class="letter">H</div>
  <div class="letter">I</div>
  <div class="letter">J</div>
  <div class="letter">K</div>
  <div class="letter">L</div>
  <div class="letter">M</div>
  <div class="letter">N</div>
  <div class="letter">O</div>
  <div class="letter">P</div>
  <div class="letter">Q</div>
  <div class="letter">R</div>
  <div class="letter">S</div>
  <div class="letter">T</div>
  <div class="letter">U</div>
  <div class="letter">V</div>
  <div class="letter">W</div>
  <div class="letter">X</div>
  <div class="letter">Y</div>
  <div class="letter">Z</div>
  <div class="letter">0-9</div>
</div>
<br/>
<div id="resultaten">
  <div id="alfabet-header"></div>
  <div id="zoek-header" class="verborgen">Zoekresultaten voor:</div>

  <div class="inhoud letter-A verborgen" data-zoekwoorden="appels fruit boom">
    <a href="www.appels.com" target="_blank">Appels</a>
  </div>
  <div class="inhoud letter-B verborgen" data-zoekwoorden="boerenkool groente kruid">
    <a href="www.boerenkool.com" target="_blank">Boerenkool)</a>
  </div>
  <div class="inhoud letter-B verborgen" data-zoekwoorden="bonen groente struik bruin wit">
    <a href="www.bonen.com" target="_blank">Bonen</a>
  </div>
  <div class="inhoud letter-C verborgen" data-zoekwoorden="citrus fruit boom sinaasappel citroen limoen">
    <a href="www.citrus.com" target="_blank">Citrus</a>
  </div>
  <div class="inhoud niets-gevonden verborgen">Niets gevonden</div>
</div>

＆＃13;

永远记住，调试JS代码时要做的第一件事就是检查控制台是否有错误。

使用数据选择器后jquery的执行方式是否与使用文本选择器后执行的方式不同？

1 个答案: