使用數據選擇器后jquery的執行方式是否與使用文本選擇器后執行的方式不同？

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 -function之后執行代碼。 我不明白為什么。

令我更驚訝的是，當我更換第28行時：

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

有：

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

代碼確實執行。

當然，文本不是數據的替代品。 有誰知道這里發生了什么？

Answer 1

你的each()循環總是被執行，並且除了讀取它們的值之外，方式data()或text()之間沒有邏輯差異。

您的問題僅僅是因為並非所有.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代碼時要做的第一件事就是檢查控制台是否有錯誤。