2016-11-18 4 views
6

Я абсолютно сбит с толку. Вот мой CSS:Класс существует, но не найден

 $(window).load(function(){ 
 

 
      $('.zichtbaar').removeClass('zichtbaar').addClass('verborgen'); 
 

 
      $('#zoekitem').focus(); 
 

 

 

 
      $('.letter').on('click', function(){ 
 

 
       $('.zichtbaar').addClass('verborgen').removeClass('zichtbaar'); 
 

 
       var letter = $(this).text(); 
 

 
       var klasse = "LETTER-" + letter; 
 

 
       var el = $('.' + klasse); 
 
       
 
       alert(klasse + " - " + el.length); 
 
       
 
       $('#alfabet-header').html(letter); 
 

 
       el.addClass('zichtbaar').removeClass('verborgen'); 
 

 
      }); 
 

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

 
     font-size: 5em; 
 

 
     font-weight: bold; 
 

 
     } 
 

 

 
     .inhoud{ 
 

 
     margin-left: 10%; 
 

 
     } 
 

 
     .verborgen{ 
 

 
     display:none; 
 

 
     } 
 

 

 
     #zoek-header{ 
 

 
     font-size: 2em; 
 

 
     }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<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> 
 

 
      <div id="alfabet-header"></div> 
 

 
      <div id="zoek-header" class="verborgen">Zoekresultaten voor:</div> 
 

 
      <div class="inhoud LETTER-A verborgen"><a href="www.appels.com" target="_blank">Appels</a></div> 
 

 
      <div class="inhoud LETTER-B verborgen"><a href="www.boerenkool.com" target="_blank">Boerenkool</a></div> 
 

 
      <div class="inhoud LETTER-B verborgen"><a href="www.bonen.com" target="_blank">Bonen</a></div> 
 

 
      <div class="inhoud LETTER-B verborgen"><a href="www.bosbessen.com" target="_blank">Bosbessen</a></div> 
 

 
      <div class="inhoud LETTER-C verborgen"><a href="www.citrus.com" target="_blank">Citrus</a></div> 
 

 
      <div class="inhoud LETTER-K verborgen"><a href="www.kappertjes.com" target="_blank">Kappertjes</a></div> 
 

 
      <div class="inhoud LETTER-T verborgen"><a href="www.tuinbonen.com" target="_blank">Tuinbonen</a></div> 
 

 
      <div class="inhoud LETTER-W verborgen"><a href="www.wittekool.com" target="_blank">Witte kool</a></div> 
 

 
     </div>

Когда я нажимаю A, B, или T все в порядке; Предупреждение показывает количество элементов, которые имеют имя класса, которое я ищу, и отображает их. Но когда я нажимаю C, K или W, элементы, хотя они явно существуют, не найдены.

У меня нет ни малейшего оттенка подсказки, почему это происходит.

+4

У вас есть много '% u200B' нулевой ширины пространства в вашем HTML-разметки. – epascarello

ответ

12

У вас много символов пробега нулевой ширины Unicode в вашем HTML-источнике, и в частности, в начале текста есть поле «C». Поэтому, когда вы получаете доступ к элементу .text(), это не просто «C».

+1

Из любопытства, как вам удалось найти это из копий-пасты OP? – roberto06

+5

Если вы вставляете его, например, в JSFiddle, он выделяет их. – Devilscomrade

+0

Так что я не могу просто использовать «С» в своем HTML? Это правильно? Или мне нужно получить к нему доступ по-другому в javascript? Каково решение? – johannes

0

Удалены ненужные символы Unicode .. проверьте ниже фрагмент кода

$(window).load(function(){ 
 
     $('.zichtbaar').removeClass('zichtbaar').addClass('verborgen'); 
 
     $('#zoekitem').focus(); 
 
     $('.letter').on('click', function(){ 
 
      $('.zichtbaar').addClass('verborgen').removeClass('zichtbaar'); 
 
      var letter = $(this).text(); 
 
      var klasse = "LETTER-" + letter; 
 
      var el = $('.' + klasse); 
 
      alert(klasse + " - " + el.length); 
 
      $('#alfabet-header').html(letter); 
 
      el.addClass('zichtbaar').removeClass('verborgen'); 
 
     }); 
 
    });
#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{ 
 
    font-size: 5em; 
 
    font-weight: bold; 
 
    } 
 
    .inhoud{ 
 
    margin-left: 10%; 
 
    } 
 
    .verborgen{ 
 
    display:none; 
 
    } 
 
    #zoek-header{ 
 
    font-size: 2em; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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> 
 
     <div id="alfabet-header"></div> 
 
     <div id="zoek-header" class="verborgen">Zoekresultaten voor:</div> 
 
     <div class="inhoud LETTER-A verborgen"><a href="www.appels.com" target="_blank">Appels</a></div> 
 
     <div class="inhoud LETTER-B verborgen"><a href="www.boerenkool.com" target="_blank">Boerenkool</a></div> 
 
     <div class="inhoud LETTER-B verborgen"><a href="www.bonen.com" target="_blank">Bonen</a></div> 
 
     <div class="inhoud LETTER-B verborgen"><a href="www.bosbessen.com" target="_blank">Bosbessen</a></div> 
 
     <div class="inhoud LETTER-C verborgen"><a href="www.citrus.com" target="_blank">Citrus</a></div> 
 
     <div class="inhoud LETTER-K verborgen"><a href="www.kappertjes.com" target="_blank">Kappertjes</a></div> 
 
     <div class="inhoud LETTER-T verborgen"><a href="www.tuinbonen.com" target="_blank">Tuinbonen</a></div> 
 
     <div class="inhoud LETTER-W verborgen"><a href="www.wittekool.com" target="_blank">Witte kool</a></div> 
 
    </div>

1

я просто проверить элемент. здесь я нашел решение:

enter image description here

1

Ваша проблема также решается, если скопировать мое письмо-заголовок DIV здесь: они свободны от NULL байт.

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

Из @Pointy anwswer вы можете удалить это нулевое пространство без изменения вида. Srcipt удалить эти пространства является .replace(/\u200B/g,'');

Так что ваш сценарий будет как ИНТ его фрагмент

$(window).load(function() { 
 
    $('.zichtbaar').removeClass('zichtbaar').addClass('verborgen'); 
 
    $('#zoekitem').focus(); 
 
    $('.letter').on('click', function() { 
 
     $('.zichtbaar').addClass('verborgen').removeClass('zichtbaar'); 
 
     var letter = '' + $(this).text().replace(/\u200B/g,''); 
 
     var klasse = "LETTER-" + letter; 
 
     var el = $('.' + klasse); 
 
     alert(klasse + " - " + el.length); 
 
     $('#alfabet-header').html(letter); 
 
     el.addClass('zichtbaar').removeClass('verborgen'); 
 
    }); 
 
});
#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{ 
 
    font-size: 5em; 
 
    font-weight: bold; 
 
} 
 
.inhoud{ 
 
    margin-left: 10%; 
 
} 
 
.verborgen{ 
 
    display:none; 
 
} 
 
#zoek-header{ 
 
    font-size: 2em; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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> 
 
    <div id="alfabet-header"></div> 
 
    <div id="zoek-header" class="verborgen">Zoekresultaten voor:</div> 
 
    <div class="inhoud LETTER-A verborgen"><a href="www.appels.com" target="_blank">Appels</a></div> 
 
    <div class="inhoud LETTER-B verborgen"><a href="www.boerenkool.com" target="_blank">Boerenkool</a></div> 
 
    <div class="inhoud LETTER-B verborgen"><a href="www.bonen.com" target="_blank">Bonen</a></div> 
 
    <div class="inhoud LETTER-B verborgen"><a href="www.bosbessen.com" target="_blank">Bosbessen</a></div> 
 
    <div class="inhoud LETTER-C verborgen"><a href="www.citrus.com" target="_blank">Citrus</a></div> 
 
    <div class="inhoud LETTER-K verborgen"><a href="www.kappertjes.com" target="_blank">Kappertjes</a></div> 
 
    <div class="inhoud LETTER-T verborgen"><a href="www.tuinbonen.com" target="_blank">Tuinbonen</a></div> 
 
    <div class="inhoud LETTER-W verborgen"><a href="www.wittekool.com" target="_blank">Witte kool</a></div> 
 
</div>

+1

Зачем вам это делать, а не только исправлять источник HTML? – Pointy

+0

, поскольку источник представления не может находиться под его контролем – Aroniaina

Смежные вопросы