Question

我使用此代码。

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

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

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

我计划用户点击li区域...

会将alt内容插入到textarea（#reply_comment_textarea）

该页面将有很多li＃r_user和textarea＃reply_comment_textarea

...例如

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


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


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

我如何点击 li＃r_user 将将替代内容插入下一个 #reply_comment_textarea < / p>

现在mycode仅适用于第一个li标签？

Answer 1

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>

并将您的JS更改为：

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

DEMO

$(this).nextAll('reply_comment_textara')在您点击的元素后选择所有textareas。然后.first()选择第一个，因此点击只会更新您点击的文本区域下方的文本区域。

此外，您不应该使用自己的自定义属性; alt不是li元素的标准属性。要在DOM元素中存储特定于应用程序的数据，请使用data-XXX属性，例如data-alt="@tommy "，这些是专门为应用程序使用而保留的。在jQuery中，您可以使用.data()进行访问，例如$(this).data('alt')。

Answer 2

将其更改为类定义：

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

要

$('.r_user').click();
<li class="r_user"></li>

Answer 3

您不能对多个元素使用相同的ID。 jQuery现在已经知道你在说什么了。您只需附加到控件的单击事件即可。试试这个：

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

Answer 4

如评论中所述，ID必须在HTML中是唯一的。这就是为什么jQuery只挑选第一个LI。

你可以通过使用类来实现你想要的。我也不明白为什么你有多个textareas。这是修订版：

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

请注意我是如何将id="r_user"更改为class="r_user"的。这样，您就可以拥有多个具有相同类的元素。

对于JS：

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

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

jquery cdoe为什么只有第一项？

4 个答案: