Javascript Jquery只抛出一个操作

我以这种方式组织了页面：

<div class="singlePost">
        <div class="post">  </div>
        <div class="comments" data-idPost="310"> </div>
        <div class="formComment">
            <textarea data-idPost="310"></textarea>
            <button data-idPost="310">Insert</button>
        </div>
 </div>
 <div class="singlePost">
        <div class="post">  </div>
        <div class="comments" data-idPost="304"> </div>
        <div class="formComment">
            <textarea data-idPost="304"></textarea>
            <button data-idPost="304">Insert</button>
        </div>
 </div>

我认为这不是组织这种事情的方式。我有一个问题，当我点击按钮时，我有多个动作一起运行，所以同一条评论被插入了好几次。您建议怎么做？

试试这个，传递相关，默认情况下jQuery使用文档作为上下文，所以它在整个文档中搜索

$(".formComment button").click(function() {
    var parentdiv = $(this).closest('.formComment');
    idPost=$(this).attr('data-idpost');
    text=$('textarea[data-idpost="'+idPost+'"]',parentdiv ).val();
    noty({text: 'I\'m going to insert '+text});
    //and here i make the ajax request
    return false;

});

试试这个，传递相关的，默认情况下jQuery使用文档作为上下文，所以它在整个文档中搜索

$(".formComment button").click(function() {
    var parentdiv = $(this).closest('.formComment');
    idPost=$(this).attr('data-idpost');
    text=$('textarea[data-idpost="'+idPost+'"]',parentdiv ).val();
    noty({text: 'I\'m going to insert '+text});
    //and here i make the ajax request
    return false;

});

如果您也在学习“组织”，我建议只使用一次

数据-

，例如：

<div class="singlePost" data-postId="310">
    <div class="post">  </div>
    <div class="comments"> </div>
    <div class="formComment">
        <textarea></textarea>
        <button class="btn-submit">Insert</button>
    </div>
 </div>
<div class="singlePost" data-postId="311">
    <div class="post">  </div>
    <div class="comments"> </div>
    <div class="formComment">
        <textarea></textarea>
        <button class="btn-submit">Insert</button>
    </div>
 </div>

这里有一个活生生的例子：

如果你也在学习“组织”，我建议只使用一次你的

数据-

，比如：

<div class="singlePost" data-postId="310">
    <div class="post">  </div>
    <div class="comments"> </div>
    <div class="formComment">
        <textarea></textarea>
        <button class="btn-submit">Insert</button>
    </div>
 </div>
<div class="singlePost" data-postId="311">
    <div class="post">  </div>
    <div class="comments"> </div>
    <div class="formComment">
        <textarea></textarea>
        <button class="btn-submit">Insert</button>
    </div>
 </div>

---

这里有一个活生生的例子：

您实际上不需要使用

数据idPost

将相关元素绑定在一起。单击按钮时，您可以使用

$（this）.prev（）.val（）

（或

$（this）.closest（“div.formComment”）.find（“textarea”）.val（）

（如果您希望更灵活些），获取相关textarea的值。我在你的代码中没有看到任何会导致“多个操作同时运行”的东西。（我假设JS中

formCommento

末尾的“o”只是问题中的一个输入错误？）我需要数据idPost来保存帖子的Id，然后将其发送到php代码我的观点是，您不需要在每个相关元素上重复

数据idPost

。将它放在其中一个元素上，只需按钮或div，然后使用DOM遍历方法（根据我之前的评论）来确定哪些元素属于同一个元素-这将使html和JS更加整洁。您实际上不需要使用

数据idPost

将相关元素绑定在一起。单击按钮时，您可以使用

$（this）.prev（）.val（）

（或

$（this）.closest（“div.formComment”）.find（“textarea”）.val（）

（如果您希望更灵活些），获取相关textarea的值。我在你的代码中没有看到任何会导致“多个操作同时运行”的东西。（我假设JS中

formCommento

末尾的“o”只是问题中的一个输入错误？）我需要数据idPost来保存帖子的Id，然后将其发送到php代码我的观点是，您不需要在每个相关元素上重复

数据idPost

。将它放在其中一个元素上，只需按钮或div，然后使用DOM遍历方法（根据我之前的评论）来确定哪些元素属于同一个元素-这将使html和JS更加整洁。但是，对于每个文本区域，

data idPost

值不是不同吗？当值不同时，不需要上下文。当您只需说出

$（this）.closest（“div.formComment”）.find（“textarea”）.val（）

，为什么仍要尝试通过该属性选择textarea？但每个textarea的

数据idPost

值不是不同吗？当值不同时，不需要上下文。当您只能说

$（this）.closest（“div.formComment”）.find（“textarea”）.val（）

时，为什么还要尝试通过该属性选择textarea？