jQuery僅在DOM中點擊下一個表單元素

我對此很難接受。基本上有一個微博的帖子列表。每個帖子後面都有一個編輯表單，但最初設置爲在CSS中不顯示任何內容。我只想顯示（slideToggle）編輯表單，它直接在點擊編輯鏈接（$ this）的微博後面。jQuery僅在DOM中點擊下一個表單元素

注：在下面的描述中，我只提到。我的意思是頁面上有很多編輯表單，但我只想在a.edit_this被點擊的article.post後面顯示。

<div id="microblog"> 
    <article class="post"> 
     <figure class="av"> 
    <img src="avatarurl" alt=""> 
     </figure> 
     <div class="post_text"> 
    <h3>Post title <span> <a href="#" class="edit_this">Edit link</a></span> <span>Delete</span></h3> 
    <div class="postmeta">Date<span>Time</span></div> 
      <p>Post body</p> 
    <br> 
    <a href="#" class="details">Details</a> 
     </div> 
    </article> <-- End of micropost 

    <form class="edit_form"> <-- Need to show only this when clicking on the .edit_this 
            link in the above micropost 
    </form> 

    <article class="post"> <-- Beginning of next micropost 
     <figure class="av"> 
    <img src="avatarurl" alt=""> 
     </figure> 
     <div class="post_text"> 
    <h3>Post title <span> <a href="#" class="edit_this">Edit link</a></span> <span>Delete</span></h3> 
    <div class="postmeta">Date<span>Time</span></div> 
      <p>Post body</p> 
    <br> 
    <a href="#" class="details">Details</a> 
     </div> 
    **</article>** <-- End of micropost

來源

2013-08-04 Mate Kaszas

$('.edit_this').on('click',function(){  
    $(this).closest('.post').next('.edit_form').slideToggle(); 
});

你可能不得不使用nextAll（）如果爲每個表單編輯一個以上的文章

來源

2013-08-04 13:59:13

謝謝你的答案，但它不似乎沒有用。如果我將preventDefault（）添加到它，那麼它會阻止默認行爲，但slideToggle不起作用。 –

它適用於我http://jsfiddle.net/gUJPT/ –

.edit_form總是在相應的文章後面？ –

我不太肯定的微柱的正上方，但：

如果後實際的（不是內）的微柱，那麼如果形式是非常下一個元素：

$this.next().slideToggle();

如果它遵循微柱但是在兩者之間的一些元素：

$this.nextAll("selector for edit form").first().slideToggle();

如果是內的微柱，則：

$this.find("selector for edit form").slideToggle();

來源

2013-08-04 13:58:46

jQuery僅在DOM中點擊下一個表單元素

回答

相關問題