Question

我有以下代码，它应该将h2的值从“Show More”更改为“Show Less”，然后在单击父级时再返回。

if（）测试正常并将文本更改为Show Less但它永远不会再将其更改回来并始终显示警告“Show More”，因此它只是没有检测到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()检查文字，而是使用.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 3

功能.val('Show More)尝试设置 HTML属性value为“Show More'。如果您将其称为不带参数，则它将充当 getter ，而不是setter - 这就是您想要的。但对于文本而言，不是价值。

因此，您需要.val('Show More')。

，而不是.text() == 'Show More'

Answer 4

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

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

即使是第一次代码也无法正常工作，因为它总是做同样的事情。它似乎第一次工作的原因是它碰巧总是做第一次应该做的事情。

jquery切换文本只更改一次

4 个答案: