jquery - 无法更改 H3 标记内的 SPAN 标记的文本，其中包含不应使用 jQuery 更改的其他文本

Question

我的目标是，当用户单击时，包含<div class="title">内容内的文本会发生变化，当再次单击时，它将恢复到以前的值。<span><h3>

<div class="title">
    <h3>Text The Doesn't Change <span>Text That Changes</span></h3>
</div>

但是，当我单击 div 时，无论单击多少次，文本都会更改一次然后停止。

如果我从代码中删除跨度之前的文本：

<div class="title">
    <h3><span>Text That Changes</span></h3>
</div>

然后它工作正常，但是我需要为我的特定应用程序提供该文本。

这是我的 jQuery 代码：

$('div.title').click(function(){
    $(this).children('h3').children('span').text($(this).text() == '-' ? '+' : '-');;
});

这是一个链接到页面，看看我是什么：演示

score 2 · Accepted Answer

替换.children(...)为.find(...)-- 在您的第一个代码块中，<span>实际上是文本节点的直接子节点，而不是<h3>. 使用.find将根据需要向下钻取以找到<span>.

更新

您在方法this内部的使用.text()并不指向您的想法。尝试使用回调函数：

$('div.title').click(function(){
    $(this).find('span').text(function(i,t) {
        return (t=='-') ? '+' : '-';
    });
});

score 0 · Accepted Answer

在这种情况下，您正在访问错误的元素 ( div.title)：

$(this).text() == '-' ? '+' : '-'

这应该是：

$('h3 > span', this).text() === '-' ? '+' : '-'

一切都可以简化为：

$('div.title').click(function(){
  var $span = $('h3 > span', this);
  $span.text($span.text() === '-' ? '+' : '-');
});

</p>

2 回答 2