时间戳

首页 > 解决方案 > 如何区分具有相同类名的按钮

javascript - 如何区分具有相同类名的按钮

问题描述

再会！我对前端开发非常陌生，作为作业的一部分，我必须使用纯 HTML、CSS 和 JavaScript 来制作下一件事：具有相同类名的 6 个按钮（喜欢）。对于一个没有被点击的和一个被点击的，我有不同的背景图片。相反，在 Demo 中background-color，我猜没关系。

let pageCont = document.querySelector(`.page`);
let mainCont = pageCont.querySelector(`.container`);
let tableCont = mainCont.querySelector(`.table`);
let tableElem = tableCont.querySelector(`.table__element`);
let elemCont = tableElem.querySelector(`.table__text-container`);
var likeIcon = elemCont.querySelectorAll(`.table__like-icon`);

for (var i = 0; i < likeIcon.length; i++) {
    likeIcon[i].addEventListener('onclick', function likeIconIsClicked() 
    {
        likeIcon.classList.toggle(`table__like-icon_active`);
    }
    );
}

这个想法是改变 button(table__like-icon --> table__like-icon_acitve) 属性。如果我使用var likeIcon = elemCont.querySelector(`.table__like-icon`)而不是querySelectorAll，我将只能更改不正确的第一个找到的按钮。所以我使用了在 StackOverflow 上找到的代码并尝试使用它。没有工作太多。这是演示 http://jsfiddle.net/gasparilla/9cL7ua4r/11/

有人可以帮我吗？

标签： javascripthtmlcss

解决方案

This关键字，指定函数的调用者，在本例中是用户单击的按钮。This从那里开始，您可以使用关键字更改元素的属性。

这是一个快速参考：https ://www.w3schools.com/js/js_this.asp

var likeIcon = document.querySelectorAll(`.table__like-icon`);

for (var icon of likeIcon) {
  icon.addEventListener('click', likeIconIsClicked);
}

function likeIconIsClicked() {
  this.classList.toggle(`table__like-icon_active`);
}
.table__like-icon_active {
  background-color: blue!important;
}

.table__like-icon {
  background: red;
  height: 50px;
  width: 50px;
  //your custom class including background-image: ,...
}
<button class="table__like-icon" type="button"></button>
<button class="table__like-icon" type="button"></button>
<button class="table__like-icon" type="button"></button>

推荐阅读