Question

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

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

我使用html5数据属性来区分帖子，我的jquery代码是：

$(".formCommento button").click(function() {

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

});

我认为这不是组织这种东西的方法。我有一个问题，当我点击按钮时，我有多个动作一起运行，因此多次插入相同的注释。你有什么建议吗？

Answer 1

如果您正在学习“整理”，我建议您只使用一次data-，例如：

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

然后，为每个按钮点开它：

$(".singlePost .btn-submit").click(function() {
    var singlePost = $(this).closest(".singlePost"), // get singlePost block
        postId = singlePost.attr("data-postId"),  // read data attribute
        txt = singlePost.find("textarea").val(); // get it's own textarea value

    // do your magic
});

以下是一个实例：http://jsbin.com/iyomaj/1/edit

Answer 2

试试这个，传递相关的context，默认情况下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只抛出一个动作

2 个答案: