javascript - 使用data-selector后jquery的执行方式与使用text-selector后的执行方式不同吗？

Question

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

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

#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;
}

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

此脚本从不执行 $('.inhoud').each 函数之后的代码。我不明白为什么。

更让我惊讶的是，当我替换第 28 行时:

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

与:

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

代码确实执行了。

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

Answer 1

你的 each() 循环总是被执行，并且 data() 或 text() 除了 where从中读取它们的值。

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

要解决此问题，请为 data 属性提供一个默认值，如下所示:

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

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

#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;
}

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

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