jquery切换文本只改变一次

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

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

这应该是 .text 而不是 .val 吗？