Question

我实际上在使用社交网络部分的网络应用程序上工作。

此代码的目的是显示特定用户的帖子（即，此用户可能已为所显示的帖子之一投票'赞'或'不喜欢'）：

<c:forEach var="post" items="${requestScope['postVotes']}">
                <div class="thread" data-post="${post.key.messageId}"
                    data-vote="${post.value}"
                    data-response-level-message="${post.key.responseLevelMessage}">
                    <c:if test="${post.key.responseLevelMessage == 0}">
                        <hr>
                        <font size="2"> Le <fmt:formatDate
                                value="${post.key.messageDate}" /> par <a
                            href="${pageContext.request.contextPath}/CentralStation?section=votePage&CurrentContext=${post.key.messageId}">${post.key.messageSender}</a><br>
                            <br> ${post.key.messageTitle}<br>
                            ${post.key.messageContent}<br>
                            <p class="postId"></p>
                        </font>
                    </c:if>
                    <c:if test="${post.key.responseLevelMessage > 0}">
                        <font size="1"> <a
                            href="${pageContext.request.contextPath}/CentralStation?section=votePage&CurrentContext=${post.key.messageId}">${post.key.messageSender}</a><br>
                            <br> ${post.key.messageContent}<br>
                            <p class="postId"></p>
                        </font>
                    </c:if>

                    <input type="image" class="like" src="img/up.png"
                        data-vote="${post.value}" value="Like"> 
                    <input
                        type="image" class="dislike" src="img/down.png"
                        data-vote="${post.value}" value="Dislike">
                </div>
            </c:forEach>

显示帖子列表后，jQuery代码将用于管理用户的投票。我不得不说我是JS / jQuery的初学者，我的问题将集中在我不理解的jQuery的特定行为上。

$(document).ready(function () {
  $('.thread').each(function () {
    //Previons function
    var thread = $(this);
    var val = thread.data("vote");
    thread.find("p").text(val);
    if (val == 1) {
      thread.find(".like").addClass('voted');
    }
    else if (val == -1) {
      thread.find(".dislike").addClass('voted');
    }
  });
});
$(document).ready(function () {
  $('.thread').each(function () {
    var thread = $(this);

    //Treat like button
    thread.on('click', this.children("input.like"), function () {
        //Retrive vode and increment
      var vote = thread.data("vote");
      if(vote <= 0){
          vote = 1;
      }
      else if (vote == 1) {
          vote = 0;
      }
      //modify data-vote
      thread.data("vote", vote);
      //print vote
      thread.find("p").text(vote);
      if (vote == 1) {
        thread.find(".like").addClass('voted');
        thread.find(".dislike").removeClass('voted');
      } else if (vote == 0){
        thread.find(".dislike").removeClass('voted');
        thread.find(".like").removeClass('voted');
      }
    });
    //Treat dislike button
    thread.on('click', this.children("input.dislike"), function () {
        //Retrive vode and increment
        var vote = thread.data("vote");
        if(vote >= 0){
          vote = -1;
        }
        else if (vote == -1) {
          vote = 0;
        }
        //modify data-vote
        thread.data("vote", vote);
        //print vote
        thread.find("p").text(vote);
        if (vote == -1) {
          thread.find(".like").removeClass('voted');
          thread.find(".dislike").addClass('voted');
        } else if (vote == 0){
          thread.find(".dislike").removeClass('voted');
          thread.find(".like").removeClass('voted');
        }
    });
  });
});

使用上面的代码，用户可以点击“赞”或“不喜欢”按钮，或清除他们的投票。

如果我使用此代码（管理“喜欢”按钮），代码的执行将不会停止，然后执行“不喜欢”按钮代码：

//Treat like button
    thread.on('click', **this.children("input.like")**, function () {...

//Treat dislike button
        thread.on('click', **this.children("input.dislike")**, function () {...

但是如果我使用这个，一切都很好，只会点击“喜欢”点击：

//Treat like button
    thread.on('click', **'input[value="Like"]'**, function () {...

//Treat dislike button
    thread.on('click', **'input[value="Dislike"]'**, function () {...

所以我的问题是关于传播（我猜）：

为什么，在第一种情况下，单击“喜欢”按钮将执行代码的“喜欢”部分，然后也“不喜欢”一部分？

为什么，在第二种情况下，单击“喜欢”按钮即可，在正确的时间停止治疗？

问这样的问题是要真正理解jQuery的行为。我在网上和很多关于jQuery的W3school页面上看过很多文章，但这对我来说并不清楚。

提前完成。

jQuery传播如何工作？

0 个答案: