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 吗？

Answer 2

您正在使用 .val() 来检查文本，请使用 < a href="http://api.jquery.com/text/" rel="nofollow">.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

函数.val('Show More)尝试将HTML属性value设置为“Show More”。如果您不带参数调用它，它将充当getter，而不是setter - 这正是您想要的。但对于文本，而不是值。

因此，您需要的是 .text() == 'Show More' 之类的内容，而不是 .val('Show More')。

Answer 4

您正在设置文本而不是比较它。使用不带参数的 text 方法来获取值，然后进行比较：

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

即使是第一次，代码也无法正常工作，因为它总是做同样的事情。它第一次看起来有效的原因是它总是做第一次应该做的事情。