Jquery知道为什么只有第一项可用

jquery cdoe why only available for first item?

本文关键字：一项 为什么 Jquery      更新时间：2023-09-26

我使用这个代码。

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

$('#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内容(#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将插入alt内容到下一个#reply_comment_textarea

现在mycode只适用于第一个li标签?

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;
    });
});

演示

$(this).nextAll('reply_comment_textara')选择您单击的元素后面的所有文本区域。然后.first()选择第一个，所以点击将只更新文本区域下方的你点击。

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

将其更改为类定义:

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


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

不能对多个元素使用相同的id。jQuery现在有办法知道您在说什么。您可以直接附加到控件的单击事件。试试这个:

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

就像评论中说的，id在HTML中必须是唯一的。这就是为什么jQuery只选择第一个li。

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

<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元素上添加单击事件，在这种情况下使用a元素几乎总是更好，但这超出了本回答的范围。

相关文章：