Javascript jquery cdoe为什么仅适用于第一项？

我使用这个代码

我需要单击一个区域来选择要插入的用户名

$('#r_user').click(function(){ 
    $('#reply_comment_textarea').val($('#reply_comment_textarea').val()+$(this).attr('alt')); 
});

<li id="r_user" alt="@tommy ">...something</li>

$（'r#u user'）。单击（函数（）{
$（'#reply_comment_textarea'）.val（$（'#reply_comment_textarea'）.val（）+$（this.attr（'alt'））；
});
…什么

我计划用户是点击li区域

将alt内容插入文本区域（#回复_评论_文本区域）

该页面将有许多li#r#u用户和文本区#回复#评论#文本区

例如

…什么东西
…什么
…什么
…什么
…什么
…什么

如何单击，li#r#u用户将将alt内容插入下一个，，。\r#u评论(文本区

---

现在mycode仅可用于第一个li标记？

将其更改为类定义：

$('#r_user').click();

到

$（'.r_user'）。单击（）；

不能对多个元素使用同一id。jQuery现在有办法知道您在谈论什么。您可以只附加到控件的单击事件。试试这个：

$('li').click(function(){ 
    $('#reply_comment_textarea').val(
        $('#reply_comment_textarea').val() +
        $(this).attr('alt')
    ); 
});

---

ID应该是唯一的，请求ID的选择器只返回第一个ID。改为使用类

将您的HTML更改为：

<li class="r_user" alt="@tommy ">...something</li>
<li class="r_user" alt="@peter ">...something</li>
<li class="r_user" alt="@kate ">...something</li>
<textarea class="reply_comment_textarea"></textarea>


<li class="r_user" alt="@tom ">...something</li>
<li class="r_user" alt="@tony ">...something</li>
<textarea class="reply_comment_textarea"></textarea>


<li class="r_user" alt="@tommy ">...something</li>
<textarea class="reply_comment_textarea"></textarea>

$（this）.nextAll（'reply\u comment\u textara'）

选择单击元素后的所有文本区域。然后

.first（）

选择第一个，因此单击只会更新您单击的文本区域下方的文本区域

---

此外，您不应该使用自己的自定义属性

alt

不是

li

元素的标准属性。要在DOM元素中存储特定于应用程序的数据，请使用

data XXX

属性，例如

data alt=“@tommy”

，这些属性是专门为应用程序保留的。在jQuery中，您可以使用

.data（）

，例如

$（this.data（'alt'）

访问它，就像注释中所说的那样，ID在HTML中必须是唯一的。这就是为什么jQuery只选择第一个LIs

您可能可以通过使用类来实现您想要的。我也不明白为什么你有多个文本区域。以下是修订版：

<ul>    
    <li class="r_user" alt="@tommy ">...something</li>
    <li class="r_user" alt="@peter ">...something</li>
    <li class="r_user" alt="@kate ">...something</li>
    <li class="r_user" alt="@tom ">...something</li>
    <li class="r_user" alt="@tony ">...something</li>
    <li class="r_user" alt="@tommy ">...something</li>
</ul>
<textarea id="reply_comment_textarea"></textarea>

---

此外，您可能不应该在LI元素上添加单击事件，在这种情况下使用a元素几乎总是更好的，但这超出了本答案的范围。

Id必须是唯一的！！！！！！如果你想要有相同的值，你必须使用类，而不是ID。类允许您将样式和JavaScript应用于多个DOM元素，而ID允许您仅将它们应用于一个。哦..现在好了。但是如果我单击li区域将插入所有文本区域在

前面添加一个空格：

$（'.\r\u user'）

。谢谢，但是如果我使用此代码，将插入所有文本区域，如果更改代码不起作用$（'.r_user'）。单击（函数（）{$（'.reply_comment_textarea'）.val（$（'.reply_comment_textarea'）.val（）+$（此）.attr‌​（'alt'）；}）；这是因为

$（'.reply\u comment\u textarea'）

选择所有文本区域。这就是为什么我使用

.nextAll（）.first（）

在您单击的元素之后选择下一个。我对

.val（）

函数的参数错误，我现在已经修复了它。查看JSFIDLE演示。感谢您的演示！谢谢你告诉我关于数据XXX:）嗨，barmar，我测试你的代码以供使用。但是，我发现了一个非常有趣的问题。为什么你只能使用你的html？如果改变我的html为什么不工作。我的完整代码：，简单代码：，都不工作

<li class="r_user" alt="@tommy ">...something</li>
<li class="r_user" alt="@peter ">...something</li>
<li class="r_user" alt="@kate ">...something</li>
<textarea class="reply_comment_textarea"></textarea>


<li class="r_user" alt="@tom ">...something</li>
<li class="r_user" alt="@tony ">...something</li>
<textarea class="reply_comment_textarea"></textarea>


<li class="r_user" alt="@tommy ">...something</li>
<textarea class="reply_comment_textarea"></textarea>

$('.r_user').click(function(){
    var alt = $(this).attr('alt');
    $(this).nextAll('.reply_comment_textarea').first().val(function(i, oldval) {
        return oldval + alt;
    });
});

<ul>    
    <li class="r_user" alt="@tommy ">...something</li>
    <li class="r_user" alt="@peter ">...something</li>
    <li class="r_user" alt="@kate ">...something</li>
    <li class="r_user" alt="@tom ">...something</li>
    <li class="r_user" alt="@tony ">...something</li>
    <li class="r_user" alt="@tommy ">...something</li>
</ul>
<textarea id="reply_comment_textarea"></textarea>

$('.r_user').click(function(){
    var value = $('#reply_comment_textarea').val() + $(this).attr('alt');
    $('#reply_comment_textarea').val(value);
});