jquery toggle текст меняется только один раз

Question

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

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

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

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

Спасибо.

$('#panels > .feature').click(function() { 
    if($(this).children('h2').val('Show More')) { 
     $(this).children('h2').text('Show Less'); 
     alert('Show More was found');  
    } 
    else { 
     $(this).children('h2').text('Show More'); 
     alert('Show Less was found'); 
    } 
     $(this).next(".info_box").animate(
    {'height':'toggle'}, 'slow', 'linear' 
    );  
}); 

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

Вы используете .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"); 
}); 

You can test it out here.

Answer 2

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

Если это будет .text вместо .val?

Answer 3

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

Итак, вместо .val('Show More') вы хотите что-то вроде .text() == 'Show More'.

Answer 4

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

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

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