Question

我正在创建一个博客，并尝试使用JQuery切换编辑评论表单。

这里是评论显示部分的完整代码：

<!--================== COMMENTS DISPLAY SECTION     ====================================================================-->
<div id="comments">
    <% blog.comments.forEach(function(comment){ %>
    <div class="jumbotron comment">
        <div class="row">
            <div class="col-md-1">
                <img class="comment-ico" src = "<%=comment.author.image%>">
            </div>

            <div class="col-md-7">
                <h4><%=comment.author.username%></h4>
            </div>
            <div class="col-md-4 date">
                 <%= comment.created.toDateString()%>
            </div>
        </div>
    </div>
        <div><p><%=comment.text%></p></div>

<!--=================EDIT COMMENT FORM =========================================================================-->
   <form class="edit-comment-form" action = "/blogs/<%= blog._id %>/comments" method = "POST" id="newComment">
        <textarea class = "form-control" rows="4" placeholder = "Type comment here..." name = "comment[text]"></textarea>
        <button class = "btn btn-lg btn-primary btn-block">Submit</button>
    </form>
<!--    ==================================================================================================================-->
<!--=================COMMENT OPTIONS (visible if user = author) =====================================================-->

    <% if(currentUser && currentUser.username == comment.author.username) { %>
        <div class="row">
            <div class="col-md-1 choice">
                <a class="edit">Edit</a>
            </div>
            <div class="col-md-1">
                <form id = "delete-form" action = "/blogs/<%= blog._id %>/comments/<%=comment._id%>?_method=DELETE" method = "POST">
                <input type = "submit" class = "button-delete" value = "Delete"></form>
            </div>
        </div>
    <% } %>
    <hr class = "style-three">
    <% }) %>
</div>
</div>
<!--====================================================================================================================-->
<!--======================ADD COMMENT FORM ================================================================================    -->
<% if(currentUser){ %>
<div class = "container form">
   <form action = "/blogs/<%= blog._id %>/comments" method = "POST"  id="newComment">
    <div class="row">
        <div class="col-md-2">
            <img class="newComment-ico" src = "<%=currentUser.image%>">
        </div>
        <div class="col-md-10">
            <label for="comment">Add comment</label>
        </div>
    </div>
        <textarea class = "form-control" rows="4" placeholder = "Type comment here..." name = "comment[text]"></textarea>
        <button class = "btn btn-lg btn-primary btn-block">Submit</button>
    </form>
</div>

<% } %>

我的JS如下：

$('#comments').on('click', '.edit', function(){
$(this).parents().siblings('.edit-comment-form').toggle();
})

然而，这是选择所有动态显示的项目（评论），以便当我点击＆＃39; .edit＆＃39;元素，所有评论显示他们的编辑框。我知道这与我如何根据父母/兄弟姐妹等选择它们有关，但无法解决它应该是什么！

Answer 1

@Satpal评论是完美的并且归功于他，尽管他的怜悯，我会尝试深入研究逻辑：

$('#comments').on('click', '.edit', function() {
    $(this).closest('.row').prev('.edit-comment-form').toggle();
});

由于.edit strong> it（.row），基本上您正在影响最近.edit-comment-form点击的之前 .row .edit-comment-form。

在更简单的单词上，最接近的行与点击的编辑相同，并且它的前一个textarea（.row）将被切换。

以下是 prev() ＆amp;的一般示例。 closest() jQuery方法：

还要注意为什么.edit无法正常工作，因为它会切换.edit-comment-form嵌套的所有find()。

＆＃13;

.edit-comment-form

＆＃13;

#comments

＆＃13;

var selected = $("#start");
selected.css("background", "gainsboro");

//prev() - Will select previous element disregarding tag name
$(".prev").on('click', function() {
  selected = selected.prev();
  $("div").css("background", "");
  $("nav").css("background", "");
  $("section").css("background", "");
  $("span").css("background", "")
  selected.css("background", "gainsboro");
});

//closest() - Will highlight red only if selected element is a div
$(".closest").on('click', function() {
  selected.closest('div').css("background", "red");
});

//find() - Will only highlight when span element is child 
$(".find").on('click', function() {
  selected.find('span').css("background", "red");
});

//Reset
$(".reset").on('click', function() {
  $("div").css("background", "");
  $("nav").css("background", "");
  $("section").css("background", "");
  $("span").css("background", "");
  selected = $("#start");
  selected.css("background", "gainsboro");
});

＆＃13;

父母/兄弟姐妹/孩子：努力选择相关元素

1 个答案: