Question

我想制作一个简单的“类似计数器”：每次点击带有heart-icon类的span元素时，范围like-counts内的内容应该增加1.

但是当我在spans中获得一系列innerHTML内容时，我仍然坚持返回元素集合。

这是我的HTML代码：

var hearts = document.getElementsByClassName("os-list__icon");
for (var i = 0; i < hearts.length; i++) {
  hearts[i].onclick = function() {
    console.log("clicks works");
    var clicks = document.querySelectorAll(".like-counts");
    var arrayNumbers = [];
    for (var i = 0; i < clicks.length; i++) {
      var clicks = clicks[i] + 1;
      arrayNumbers.push(clicks.innerHTML);
    }
  }
}

<div class="blog-post__body">
  <footer class="blog-post__info blog-post__info--photo">
    <span class="heart-icon"><svg width="25" height="13" class="os-list__icon os-list__icon--apple">
            <use xlink:href="#img--svg--icon-heart"></use>
          </svg></span>
    <span class="like-text">Нравится:</span>
    <span class="like-counts">356</span>
  </footer>
</div>
<div class="blog-post__body">
  <footer class="blog-post__info blog-post__info--photo">
    <span class="heart-icon"><svg width="25" height="13" class="os-list__icon os-list__icon--apple">
            <use xlink:href="#img--svg--icon-heart"></use>
          </svg></span>
    <span class="like-text">Нравится:</span>
    <span class="like-counts">356</span>
  </footer>
</div>

我在替换innerHTML数组时犯了一些错误。你能解释一下我做错了什么吗？（我宁愿使用普通的javascript而不是jquery）。

Answer 1

你做错了什么：

在点击时，您会遍历所有“.like-counts”元素，也会覆盖那些不在您单击的“os-list__icon”元素的逻辑上下文中的元素
您将所有值增加1
您永远不会使用您的arrayNumbers数组

以下是您可能需要的示例：

HTML：

    <section name="like-component">
  <span class="heart-icon">A<svg width="25" height="13" class="os-list__icon os-list__icon--apple">
    <use xlink:href="#img--svg--icon-heart"></use>
    </svg></span>
  <span class="like-text">Нравится:</span>
  <span class="like-counts">0</span>
</section>

<section name="like-component">
  <span class="heart-icon">A<svg width="25" height="13" class="os-list__icon os-list__icon--apple">
    <use xlink:href="#img--svg--icon-heart"></use>
    </svg></span>
  <span class="like-text">Нравится:</span>
  <span class="like-counts">0</span>
</section>


<section name="like-component">
  <span class="heart-icon">A<svg width="25" height="13" class="os-list__icon os-list__icon--apple">
    <use xlink:href="#img--svg--icon-heart"></use>
    </svg></span>
  <span class="like-text">Нравится:</span>
  <span class="like-counts">0</span>
</section>

JS：

let allLikeComponents = document.querySelectorAll('section[name="like-component"]')


allLikeComponents.forEach(function(aSingleLikeComponent){
  let heartIcon = aSingleLikeComponent.querySelector('.heart-icon')
  heartIcon.addEventListener('click', function(){
    let likeCountsDiv = aSingleLikeComponent.querySelector('.like-counts')
    let content = likeCountsDiv.textContent;
    likeCountsDiv.textContent = (Number(content)+1);
  })
})

Answer 2

<强>缩短

访问计数一次，例如

var counts = document.querySelectorAll(".blog-post__body .like-counts")

使用

添加到每个元素

[].forEach.call(counts, count => ...)

和事件。

总计

＆＃13;

var counts = document.querySelectorAll(".blog-post__body .like-counts");
[].forEach.call(counts, count => {
  count.addEventListener("click", function() {
    var n = +this.innerHTML;
    this.innerHTML = n + 1;
  });
});

＆＃13;

<div class="blog-post__body">
  <footer class="blog-post__info blog-post__info--photo">
    <span class="heart-icon"><svg width="25" height="13" class="os-list__icon os-list__icon--apple">
        <use xlink:href="#img--svg--icon-heart"></use>
      </svg></span>
    <span class="like-text">Нравится:</span>
    <span class="like-counts">356</span>
  </footer>
</div>
<div class="blog-post__body">
  <footer class="blog-post__info blog-post__info--photo">
    <span class="heart-icon"><svg width="25" height="13" class="os-list__icon os-list__icon--apple">
        <use xlink:href="#img--svg--icon-heart"></use>
      </svg></span>
    <span class="like-text">Нравится:</span>
    <span class="like-counts">356</span>
  </footer>
</div>

＆＃13;

Answer 3

试试这段代码

您需要获得span value using innerHTML和convert it to int

parseInt(clicks[i].innerHTML)

＆＃13;

var hearts = document.getElementsByClassName("os-list__icon");
for (var i = 0; i < hearts.length; i++) {
  hearts[i].onclick = function() {
// console.log("clicks works");
var clicks = document.querySelectorAll(".like-counts");
var arrayNumbers = [];

for (var i = 0; i < clicks.length; i++) {
  var click = parseInt(clicks[i].innerHTML) + 1;
  clicks[i].innerHTML = click;
  arrayNumbers.push(clicks[i].innerHTML);
  
}
console.log(arrayNumbers);
  }
}

＆＃13;

<div class="blog-post__body">
  <footer class="blog-post__info blog-post__info--photo">
    <span class="heart-icon"><svg width="25" height="13" class="os-list__icon os-list__icon--apple">
        <use xlink:href="#img--svg--icon-heart"></use>
      </svg></span>
    <span class="like-text">Нравится:</span>
    <span class="like-counts">356</span>
  </footer>
</div>
<div class="blog-post__body">
  <footer class="blog-post__info blog-post__info--photo">
    <span class="heart-icon"><svg width="25" height="13" class="os-list__icon os-list__icon--apple">
        <use xlink:href="#img--svg--icon-heart"></use>
      </svg></span>
    <span class="like-text">Нравится:</span>
    <span class="like-counts">356</span>
  </footer>
</div>

＆＃13;

innerHTML数组的问题

3 个答案: