1

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

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

});

我认为这不是组织这类东西的方式。我有一个问题，当我单击按钮时，我有多个动作一起运行，因此多次插入相同的评论。你建议怎么做？

4

2 回答 2

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

于 2013-05-05T07:51:00.063 回答
0

试试这个，传递相关的上下文，默认情况下 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;

});
于 2013-05-05T07:46:28.253 回答