JQuery переключатель текста только изменяется один раз

Question

У меня есть следующий код, который должен изменить значение h2 с «Показать больше» на «Показать меньше», а затем снова при щелчке по родительскому элементу.

If () проверяет нормально и меняеттекст «Показать меньше», но он никогда не изменит его снова и всегда отображает предупреждение «Показать больше», поэтому он просто не обнаруживает условие else ().

Я искал максимум и минимум, чтобы выяснить,почему, но пока не нашел решения.

Я знаю, что это вопрос noob, поэтому извиняюсь за это, но я пытался найти решение, прежде чем публиковать здесь.

Спасибо.*

HTML-код, о котором идет речь:

<div id="panels">
 <div id="Email" class="feature">
    <h1>LiveContent</h1><h2>Show More</h2>
 </div>
<div class="info_box">Information will go in this div which should slide in and out.</div>
<div id="Email" class="feature">
  <h1>Publishing Solutions</h1><h2>Show More</h2>
 </div>
<div class="info_box">Information will go in this div which should slide in and out.</div> 
<div id="Email" class="feature">
  <h1>Title 1</h1><h2>Show More</h2>
 </div>
<div class="info_box">Information will go in this div which should slide in and out.</div>
</div>

Answer 1

if($(this).children('h2').val('Show More')) {

Должно ли это быть .text вместо .val?

Answer 2

Вы используете .val() для проверки текста, вместо этого используйте .text() (и сравнивайте результат, не устанавливайте это) , вот так:

if($(this).children('h2').text() == 'Show More')) { //here
    $(this).children('h2').text('Show Less');
    alert('Show More was found');     
}
else {
    $(this).children('h2').text('Show More');
    alert('Show Less was found');
}

Кроме того, вы можете уменьшить его в целом, используя функцию для .text() и .slideToggle(), например:

$('#panels > .feature').click(function() {
    $(this).children('h2').text(function(i, t) {
      return t == 'Show More' ? 'Show Less' : 'Show More';
    });
    $(this).next(".info_box").slideToggle("slow");
});

Вы можете проверить это здесь .

Answer 3

Вы устанавливаете текст, а не сравниваете его.Используйте метод text без параметра, чтобы получить значение, а затем сравнить его:

if($(this).children('h2').text() == 'Show More')

Код не работал правильно даже в первый раз, поскольку он всегда делал то же самое.Причина, по которой это сработало в первый раз, заключается в том, что он всегда делал то, что должен был делать в первый раз.

Answer 4

Функция .val('Show More) пытается установить атрибут HTML value в 'Show More'. Если бы вы назвали его без параметров , он бы действовал как получатель , а не как установщик - что вам и нужно. Но для текста, а не значение.

Так что вместо .val('Show More') вам нужно что-то вроде .text() == 'Show More'.