Question

我正在尝试制作类似于Twitter的应用程序，在该应用程序中，我希望用户可以喜欢这些帖子。但是只有第一篇文章才能很好地工作。

HTML

{% if request.user in post.userl.all %}
            <a class="likeu" style="cursor: pointer"><span id="{{ post.id }}" class="likeu1" style="font-size:24px;color:red">&hearts;</span></a>
            {% else %}
            <a class="likeu" style="cursor: pointer"><span id="{{ post.id }}" class="likeu1" style="font-size:24px;color:grey">&hearts;</span></a>
            {% endif %}

JavaScript

    document.querySelector('.likeu1').addEventListener('click', change_like);
})
function change_like(){
    m = this.style.color;
    if (m=='red'){
        this.style.color = 'grey';
    }
    else{
        this.style.color = 'red';
    }
}

Answer 1

其当前不起作用的原因是因为您正在使用querySelector方法，该方法仅返回DOM中找到的第一个元素。

此外，您不需要使用change_like之类的单独功能来处理样式更改。理想情况下，更少的代码行总是更好。您可以全部加入事件监听器

您可以将querySelectorAll方法与forEach循环一起使用，以获取与.likeu1具有相同类的所有元素，然后分别在其上添加addEventListener来检查样式

您需要执行querySelectorAll方法返回节点列表（数组类型）。

要获得正确的element，我们可以使用Event.target并获取style中的element并相应地应用styles。

实时工作演示：

let getHearts = document.querySelectorAll('.likeu1') //get all elements

getHearts.forEach(function(span) {
  span.addEventListener('click', function(e) {
    if (e.target.style.color == 'red') {
      e.target.style.color = 'grey';
    } else {
      e.target.style.color = 'red';
    }
  });
})

<a class="likeu" style="cursor: pointer"><span id="{{ post.id }}" class="likeu1" style="font-size:24px;color:red">&hearts;</span></a>
<a class="likeu" style="cursor: pointer"><span id="{{ post.id }}" class="likeu1" style="font-size:24px;color:grey">&hearts;</span></a>

Answer 2

querySelector仅返回与.likeu1类匹配的第一个元素-这就是为什么您的第一个“心脏”起作用而另一个不起作用的原因。

您需要更改的只是querySelector-而是使用querySelectorAll来获取所有匹配项，然后遍历这些匹配项以添加侦听器。您的功能可以保持不变。

工作示例：，其中包含您需要更改的代码的注释

// Get ALL elements with the likeu1 class 
var allLikeItems = document.querySelectorAll(".likeu1");

// Loop through the elements and add your listener
allLikeItems.forEach(function(likeItem) {
  likeItem.addEventListener('click', change_like);
});

// Your function can stay unchanged
function change_like() {
  m = this.style.color;
  if (m == 'red') {
    this.style.color = 'grey';
  } else {
    this.style.color = 'red';
  }
}

<a class="likeu" style="cursor: pointer"><span id="" class="likeu1" style="font-size:24px;color:red">&hearts;</span></a>

<a class="likeu" style="cursor: pointer"><span id="" class="likeu1" style="font-size:24px;color:grey">&hearts;</span></a>

参考：

类似按钮的Javascript仅适用于第一个按钮

2 个答案: