jQuery的投擲只有一個動作

我安排的頁面是這樣的：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>

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

});

我覺得這是不組織這種東西的方式。我有問題，當我點擊按鈕時，我有多個動作一起運行，因此多次插入相同的註釋。你建議做什麼？

來源

2013-05-05 IceCube

您並不需要'data-idPost'來將相關元素綁定在一起。當點擊按鈕時，可以使用'$（this）.prev（）.val（）'（或'$（this）.closest（「div.formComment」）。find（「textarea」）.val（）'如果你想更靈活），以獲得相關textarea的價值。我沒有看到任何會導致「多個操作一起運行」的代碼。（我假設你的JS中'formCommento'的末尾的「o」只是一個錯字嗎？） – nnnnnn 2013-05-05 07:44:31

我需要data-idPost來保存帖子的ID然後發送到php代碼 – IceCube 2013-05-05 07:51:43

我的觀點是你不需要在每個相關元素上重複'data-idPost'來將它們連接在一起。把它放在元素中，只是按鈕或div，並使用DOM遍歷方法（根據我以前的評論）找出哪些元素屬於一起 - 這將使html和JS整齊。 – nnnnnn 2013-05-05 07:58:29

在搜索如果你正在學習「組織」，以及，我只建議一次使用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-05 07:51:00 balexandre

試試這個，通過相關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; 

});

來源

2013-05-05 07:46:28

但是不是每個textarea都有不同的'data-idPost'值？當值不同時，您不需要上下文。爲什麼你仍然嘗試通過該屬性選擇textarea，當你可以說'$（this）.closest（「div.formComment」）。find（「textarea」）.val（）'？ – nnnnnn 2013-05-05 08:01:14

jQuery的投擲只有一個動作

回答

相關問題