javascript - jQuery .text() 显示双文本

Question

有一个奇怪的情况发生。我有一个<h3>文字。当我使用 .text() 提取此文本然后将其放入 a<textarea>时，文本出现两次。

这是jsFiddle。

HTML

<h3 class="profileRightAboutMeText">Heya, this is all the text.</h3>     
<textarea class="profileRightAboutMeTextarea"></textarea>

查询

$(document).on('click','h6.editMyProfileSection', function() {
  var originalText = $('h3.profileRightAboutMeText').text();

  $('h3.profileRightAboutMeText').fadeOut('fast', function() {
    $('textarea.profileRightAboutMeTextarea').text(originalText).fadeIn('fast');
  });
  alert(originalText);
});

警报和<textarea>显示文本都加倍，如下所示：

嘿，这是所有的文字。嘿，这是所有的文字。

Answer 1

我会说你有 2 个元素与页面上的 $('h3.profileRightAboutMeText') 匹配。

您可以在这里看到：http: //jsfiddle.net/KwcGB/该文本出现两次，因为我在 html 中添加了一个额外的 h3.profileRightAboutMeText 但如果删除了额外的行，那么它只会出现一次。

尝试将 $('h3.profileRightAboutMeText') 放入 firebug 的控制台并查看它匹配的元素数量......

Answer 2

text()对于由复合路径寻址的重复项，JQuery 对方法有不同的行为。

例如，让

<div id=b class="a">2</div>
<div id=b class="a">3</div>

然后

var val1 = $("#b").text()
var val2 = $("#b.a").text()

// val1 = 2
// val2 = 23

为避免此问题，请务必使用 .first()

var val3 = $("#b.a").first().text()

// val3 = 2

Answer 3

对于表单元素，您应该使用val()而不是text()：

$("textarea.profileRightAboutMeTextarea").val(originalText)

此外，检查您是否有重复的带有 class 的元素profileRightAboutMeText。