时间戳

首页 > 解决方案 > 为用户更改箭头颜色

javascript - 为用户更改箭头颜色

问题描述

我是一名 Django 后端开发人员，我创建了一个博客，我只想知道如何在用户为特定帖子投票后为选定的箭头着色并保存它

这是箭头 HTML：

<a href="{% url 'home:post-vote-up' id=posts.id %}">
  <i class="fas fa-arrow-up"></i>
</a>
<p class="lead">{{posts.votes}}</p>
<a href="{% url 'home:post-vote-down' id=posts.id %}"
  <i class="fas fa-arrow-down"></i>  
</a>

标签： javascripthtmlcssdjango

解决方案

只需为要使用 JS 选择的元素添加一个 ID 和一个 onclick 函数，然后在选择它之后更改它的颜色：

function arrowClickUp() {
  document.getElementById("arrowUp").style.color = "red";
}

function arrowClickDown() {
  document.getElementById("arrowDown").style.color = "red";
}
<a href="{% url 'home:post-vote-up' id=posts.id %}">
  <i onclick="arrowClickUp()" id="arrowUp" class="fas fa-arrow-up"></i>
 </a>
 <p class="lead">{{posts.votes}}</p>
<a href="{% url 'home:post-vote-down' id=posts.id %}">
  <i onclick="arrowClickDown()" id="arrowDown" class="fas fa-arrow-down"></i> 
</a>

注意：您应该将您使用的字体库链接到您的代码段，因为您什么也看不到

推荐阅读