如何在p标签或输入类型的动态值中获取动态id

Question

我通过在下面的div live下添加带有动态id的p标签来添加内容：

$("#show_comments").append('<p id="'+ id +'">' + msg + '<input type="hidden" id="delcomment" value="'+id +'"> <input type="button" id="del_status" value="Delete">' + '</p><br/>'); id++;

在HTML格式中，它将是

<p id="1">
test A
<input type="hidden" id="delcomment" value="1">
<input type="button" id="del_status" value="Delete">
</p>
<p id="2">
test B
<input type="hidden" id="delcomment" value="2">
<input type="button" id="del_status" value="Delete">
</p>

我试图通过按下Delete按钮来获取p标签的id值(即1或2等(或输入类型hiddendelcomment的值(即2或1等(。

 $("#show_comments").on('click', '#del_status', function () { console.log($("#delcomment").val());

但每次当我点击"时，它都会在div下给出delcomment的第一个值；测试C"；要删除。这是1(测试A值(而不是3的"0"；测试C"；。

在此处输入图像描述

我想知道如何通过按下Delete按钮来获得p标签的id值(即1或2等(或输入类型隐藏的delcomment的值(即2或1等(。

Answer 1

首先，在ids中不能有重复，所以将inputs的ids更改为类，如：

$("#show_comments").on('click', '.del_status', function () { console.log($(this).closest('p').find('.delcomment').val())});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="show_comments">
  <p id="1">
    test A
    <input type="hidden" class="delcomment" value="1">
    <input type="button" class="del_status" value="Delete">
    </p>
    <p id="2">
    test B
    <input type="hidden" class="delcomment" value="2">
    <input type="button" class="del_status" value="Delete">
    </p>
    
</div>

现在关于您的问题，在console.log($("#delcomment").val()中返回多个元素，并记录第一个项的值。考虑到您已将ids更改为类，请将代码更改为：

$("#show_comments").on('click', '.del_status', function () { console.log($(this).closest('p').find('.delcomment').val())});

现在，它将只获取父p元素中的元素，而不是整个div。