jQuery 切换文本仅改变一次

Question

我有以下的代码，应该可以在父元素被点击时将h2的值从"Show More"更改为"Show Less"，然后再次更改回来。

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'
     );    
});

The HTML in question is:

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

- Hedley Phillips

---

对于格式良好的问题，给予+1。 - Matt

Answer 1

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

这里应该使用.text而不是.val吗？

- benhowdle89

---

是的，.val() 用于获取输入元素（如 input 或 select）的值，而 .text() 则获取内部文本。 - Albireo

这会“设置”文本，而不是检查它当前的值（并返回一个真实的jQuery对象）。 - Nick Craver

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");
});

您可以在此处进行测试。

- Nick Craver

---

谢谢大家。你们的回答非常迅速、信息量大，而且从来没有因为我问了一个非常愚蠢的基础问题而责备我。我本来想把你们所有人的回答都标记为正确答案，但是Nick，你的回答包括了.text()函数，这个我之前看过但是有些困难，还有slidetoggle()函数，这是额外的奖励，将会非常有帮助。谢谢。Hedley - Hedley Phillips

Answer 3

函数.val('Show More')试图将HTML属性value设置为'Show More'。如果你没有参数地调用它，它将充当一个getter，而不是一个setter - 这不是你想要的。但是对于文本，而不是值。

所以，你需要像这样的东西：.text() == 'Show More'，而不是.val('Show More')。

- Kos

Answer 4

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

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

代码第一次运行时就没有正确工作，因为它总是做同样的事情。它似乎第一次工作正常的原因是它恰好在第一次做了它应该做的事情。

- Guffa