как отличить кнопки с одинаковым именем класса

ProgramBox

как отличить кнопки с одинаковым именем класса

Post author:admin
Запись опубликована:31 октября, 2022
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css — код

Вопрос:

Добрый день! Я очень новичок в интерфейсной разработке, и в качестве части моей домашней работы я должен использовать чистый HTML, CSS и JavaScript только для создания следующей вещи: 6 кнопок (лайков) с тем же именем класса. У меня есть разные фоновые изображения для того, на которое не нажимали, и для того, на которое нажимали. В демо-версии, которую я имею 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`);
    }
    );
}

Идея состояла в том, чтобы изменить свойства кнопки (таблица__like-icon —> таблица__like-icon_acitve). Если я использую var likeIcon = elemCont.querySelector(`.table__like-icon`) вместо querySelectorAll , я смогу изменить только первую найденную кнопку, которая неверна. Поэтому я использовал код, который нашел в StackOverflow, и попытался его использовать. Почти ничего не получалось. Вот демонстрационная версия http://jsfiddle.net/gasparilla/9cL7ua4r/11 /

Кто-нибудь может мне помочь?

Ответ №1:

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>

Развернуть фрагмент

Ответ №2:

В качестве альтернативы, вы могли бы использовать forEach это, чтобы помнить ссылку на значок в каждом цикле.

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

likeIcons.forEach(icon => { // change from `for` to `forEach`
  icon.addEventListener('click', function() { // change from 'onclick' to 'click'
    icon.classList.toggle(`table__like-icon_active`);
  });
})

 .table__like-icon{
    width: 21px;
    height: 18px;
    margin: auto 22px auto auto;
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
    background-color: red;
    border: 0 none;
    outline: 0;
    padding: 0;
}
.table__like-icon:hover{
    opacity: 0.5;
    cursor: pointer;
}

.table__like-icon_active{
    opacity: 1;
    background-color: black;
}

 <section class="table">
  <div class="table__element">
    <img
      src="./images/kirill-pershin-1088404-unsplash.png"
      alt=""
      class="table__image"
    />
    <div class="table__text-container">
      <h2 class="table__title">FirstButton</h2>
      <button class="table__like-icon" type="button"></button>
    </div>
  </div>
  <div class="table__element">
    <img
      src="./images/kirill-pershin-1404681-unsplash.png"
      alt=""
      class="table__image"
    />
    <div class="table__text-container">
      <h2 class="table__title">SecondButton</h2>
      <button class="table__like-icon" type="button"></button>
    </div>
  </div>
  <div class="table__element">
    <img
      src="./images/kirill-pershin-1556355-unsplash.png"
      alt=""
      class="table__image"
    />
    <div class="table__text-container">
      <h2 class="table__title">ThirdButton</h2>
      <button class="table__like-icon" type="button"></button>
    </div>
  </div>
  <div class="table__element">
    <img
      src="./images/kirill-pershin-1404681-unsplash.png"
      alt=""
      class="table__image"
    />
    <div class="table__text-container">
      <h2 class="table__title">forthButton</h2>
      <button class="table__like-icon" type="button"></button>
    </div>
  </div>
  <div class="table__element">
    <img
      src="images/kirill-pershin-1556355-unsplash.png"
      alt=""
      class="table__image"
    />
    <div class="table__text-container">
      <h2 class="table__title">fifthButton</h2>
      <button class="table__like-icon" type="button"></button>
    </div>
  </div>
  <div class="table__element">
    <img
      src="./images/kirill-pershin-1088404-unsplash.png"
      alt=""
      class="table__image"
    />
    <div class="table__text-container">
      <h2 class="table__title">sixthtButton</h2>
      <button class="table__like-icon" type="button"></button>
    </div>
  </div>
</section>

Развернуть фрагмент

Ответ №3:

Я думаю, вы ищете способ определить, какую кнопку нажать, и выполнить операции с этой кнопкой, вот и все

 document.addEventListener('click', (event) => {
    if (!event.target.matches('.table__like-icon')) return;
  // do what ever you want to do
  // event is your desire clickable button event.
  event.target.style.backgroundColor = "black";
  e.preventDefault();
})