Question

我为评论评分栏创建了一个基本的投票系统。我正在尝试访问先前的兄弟元素以更新投票，但它无法正常工作。您是否应该使用event.currentTarget或event.target？我哪里做错了？谢谢。

https://jsfiddle.net/donfontaine12/bm9njcLt/46/#&togetherjs=qocecyJqyy

HTML

<div id="comment_ratings_bar">
  <div id="comment_rating_sign">+</div>
  <div id="comment_rating_num">0</div>
  <div id="comment_rating_percentage">[100.00%] </div>
  <div class="green_up_arrow"></div>
  <div class="red_down_arrow"></div>
</div>

<div id="comment_ratings_bar">
  <div id="comment_rating_sign">+</div>
  <div id="comment_rating_num">0</div>
  <div id="comment_rating_percentage">[100.00%] </div>
  <div class="green_up_arrow"></div>
  <div class="red_down_arrow"></div>
</div>

<div id="comment_ratings_bar">
  <div id="comment_rating_sign">+</div>
  <div id="comment_rating_num">0</div>
  <div id="comment_rating_percentage">[100.00%] </div>
  <div class="green_up_arrow"></div>
  <div class="red_down_arrow"></div>
</div>

<div id="comment_ratings_bar">
  <div id="comment_rating_sign">+</div>
  <div id="comment_rating_num">0</div>
  <div id="comment_rating_percentage">[100.00%] </div>
  <div class="green_up_arrow"></div>
  <div class="red_down_arrow"></div>
</div>

CSS

#comment_ratings_bar {
  width: 30%;
  margin: 0px 20px;
  padding: 0px 20px;
  font-size: 110%;
  font-weight: bolder;
  font-family: 'B612 Mono', monospace;
  color: lime;
  background-color: black;
  border: 0px solid black;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.green_up_arrow {
  display: flex;
  flex-direction: row;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid lime;
  cursor: pointer;
  margin: 0em 0.25em;
}

.red_down_arrow {
  display: flex;
  flex-direction: row;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid red;
  cursor: pointer;
  margin: 0em 0.25em;
}

JavaScript

window.onload = function() {
  let commentUpvotes = 0;
  let commentDownvotes = 0;
  let totalCommentVotes = commentUpvotes + commentDownvotes;

  let commentRatingsBarAll = document.querySelectorAll("#comment_ratings_bar");

  for (let c of commentRatingsBarAll) {
    c.lastElementChild.previousElementSibling.addEventListener("click", updateCommentVotes);
    c.lastElementChild.addEventListener("click", updateCommentVotes);

  }
    function updateCommentVotes(e) {
        let siblings = getSiblings(e);
        let sign = siblings[0].textContent;
        let number = siblings[1].textContent;
        let percentage = siblings[2].textContent;

        if (sign && number && percentage) {
            let actualNumber = parseFloat(number.replace(/,/g, ''));

            if (e.target.className == "green_up_arrow") {
                actualNumber++; commentUpvotes++; totalCommentVotes++;
            } else {
                actualNumber--; commentDownvotes++; totalCommentVotes++;
            }

            if (actualNumber < 0) { sign.replace("+", ""); }
            
            percentage = "[" 
            + parseFloat((commentUpvotes / totalCommentVotes) * 100).toFixed(2) +"%]";

            number = actualNumber.toLocaleString();
        }
       
    }


    function getSiblings(element) {
        if (element) {
           let siblings = [];
        let sibling = element.parentNode.firstElementChild;

        while(sibling) {
            if (sibling.nodeType === 1 && sibling !== element) {
                siblings.push(sibling);
                sibling = sibling.nextElementSibling;
            }
        }
        return siblings;
        } 
    }


}

Answer 1

一切正常，但在updateCommentVotes函数内部，我应该一直在引用包含textContent而不是局部变量（符号，数字和百分比）的实际div。

编辑：这是部分修复，我需要每个单独的注释栏引用其自己的符号，数字和百分比。似乎它们共享相同的数字值。任何提示表示赞赏。虽然，我相信这是因为我对兄弟姐妹的值进行了硬编码。谢谢。

在此处检查代码：https://jsfiddle.net/donfontaine12/bm9njcLt/46/#

JavaScript

 window.onload = function() {
  let commentUpvotes = 0;
  let commentDownvotes = 0;
  let totalCommentVotes = commentUpvotes + commentDownvotes;

  let commentRatingsBarAll = document.querySelectorAll("#comment_ratings_bar");

  for (let c of commentRatingsBarAll) {
    c.lastElementChild.previousElementSibling.addEventListener("click", updateCommentVotes);
    c.lastElementChild.addEventListener("click", updateCommentVotes);

  }

   function updateCommentVotes(e) {
        let siblings = getSiblings(e);
        let sign = siblings[0].textContent;
        let number = siblings[1].textContent;
        let percentage = siblings[2].textContent;

        if (sign && number && percentage) {
            let actualNumber = parseFloat(number.replace(/,/g, ''));

            if (e.target.className == "green_up_arrow") {
                actualNumber++; commentUpvotes++; totalCommentVotes++;
            } else {
                actualNumber--; commentDownvotes++; totalCommentVotes++;
            }

            if (actualNumber < 0) { siblings[0].textContent.replace("+", ""); }
            
            siblings[2].textContent = "[" 
            + parseFloat((commentUpvotes / totalCommentVotes) * 100).toFixed(2) +"%]";

            siblings[1].textContent = actualNumber.toLocaleString();

        }
       
    }

    function getSiblings(element) {
        let siblings = [];
        let sibling = element.target.parentNode.firstElementChild;

        while(sibling) {
            if (sibling.nodeType === 1 && sibling !== element) {
                siblings.push(sibling);
                sibling = sibling.nextElementSibling;
            }
        }
        return siblings;
        
    }

}

JavaScript-如何访问event.currentTarget的兄弟姐妹？

1 个答案: