Я пытаюсь изменить цвет выбранного мной параметра и вернуть другие параметры в исходное состояние.

let options = document.getElementsByClassName('about-me-submenu-option');

let i;
function unselectAll() {
  for (i = 0; i < options.length; i++) {
    options[i].style.backgroundColor = "";
  }
}

options.onclick = function() {
  unselectAll();
  this.style.backgroundColor = "#333";
}
.container {
  background-color: #333;
  padding: 10px;
  margin: 10px;
  width: 150px;
}

.option {
  background-color: #888;
  padding: 10px;
  color: white;
}
.option:hover {
  background-color: #555;
}
<div class="container">
  <div class="option">Option</div>
  <div class="option">Option</div>
  <div class="option">Option</div>
  <div class="option">Option</div>
  <div class="option">Option</div>
  <div class="option">Option</div>
  <div class="option">Option</div>
</div>

Или я помещаю его в jsfiddle здесь: https://jsfiddle.net/ou3sach0/

Как выбрать элемент, по которому щелкнули? JQuery - лучший инструмент для этого?

1
Trojo 7 Окт 2020 в 15:23

3 ответа

Лучший ответ

Вы добавляете обработчик кликов onclick в массив элементов вместо самих элементов - вам нужно добавить обработчик кликов к каждому из элементов, как это (см. Комментарии для получения дополнительной информации ):

// 1. Use querySelectorAll to get a NodeList that we can add the listener to
let options = document.querySelectorAll('.option');

// 2. loop through the options and add the event listener to each element
options.forEach(option => {
   option.addEventListener('click', function(){
      unselectAll();
      this.style.backgroundColor = "#333";  /* add colour to clicked element only */
   } );
});

Рабочий пример:

let options = document.querySelectorAll('.option');

let i;
function unselectAll() {
    for (i = 0; i < options.length; i++) {
        options[i].style.backgroundColor = "";
    }
}

// loop through the options and add the event listener to each element
options.forEach(option => {
   option.addEventListener('click', function(){
      unselectAll();
      this.style.backgroundColor = "#333";  
   } );
});
.container {
  background-color: #333;
  padding: 10px;
  margin: 10px;
  width: 150px;
}

.option {
  background-color: #888;
  padding: 10px;
  color: white;
}
.option:hover {
  background-color: #555;
}
<div class="container">
  <div class="option">Option</div>
  <div class="option">Option</div>
  <div class="option">Option</div>
  <div class="option">Option</div>
  <div class="option">Option</div>
  <div class="option">Option</div>
  <div class="option">Option</div>
</div>
5
FluffyKitten 7 Окт 2020 в 12:45

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

let options = document.querySelectorAll('.container .option');

function unselectAll() {
  options.forEach(option => {
    option.style.backgroundColor = "";
  });
}

options.forEach(option => {
  option.addEventListener('click', event => {
    unselectAll();
    option.style.backgroundColor = "#333";
  })
});
.container {
  background-color: #333;
  padding: 10px;
  margin: 10px;
  width: 150px;
}

.option {
  background-color: #888;
  padding: 10px;
  color: white;
}
.option:hover {
  background-color: #555;
}
<div class="container">
  <div class="option">Option</div>
  <div class="option">Option</div>
  <div class="option">Option</div>
  <div class="option">Option</div>
  <div class="option">Option</div>
  <div class="option">Option</div>
  <div class="option">Option</div>
</div>

Или используйте всплытие событий, которое использует меньше таких событий

let options = document.querySelectorAll('.option');

function unselectAll() {
  options.forEach(option => {
    option.style.backgroundColor = "";
  });
}

const container = document.querySelector('.container');

container.addEventListener('click', event => {
  if (!event.target in options) {
    return;
  }
  unselectAll();
  event.target.style.backgroundColor = "#333";
});
.container {
  background-color: #333;
  padding: 10px;
  margin: 10px;
  width: 150px;
}

.option {
  background-color: #888;
  padding: 10px;
  color: white;
}
.option:hover {
  background-color: #555;
}
<div class="container">
  <div class="option">Option</div>
  <div class="option">Option</div>
  <div class="option">Option</div>
  <div class="option">Option</div>
  <div class="option">Option</div>
  <div class="option">Option</div>
  <div class="option">Option</div>
</div>
0
Saar Davidson 7 Окт 2020 в 12:40

Вы можете добиться этого с помощью vanilla JS, но, поскольку вы упомянули jQuery, вот мой вариант:

CSS класс

.option-clicked{background-color: #333;}

JS

$(".option").on("click", function(){
  $(".option").removeClass("option-clicked");
  $(this).addClass("option-clicked");
});

https://jsfiddle.net/hv0qnwsx/9/

По сути, каждый раз, когда вы щелкаете элемент «.option», класс «.option-clicked» удаляется, а затем добавляется к ЭТОЙ конкретной «.option», которую вы щелкнули. Надеюсь, это достаточно ясно!

0
Carsten Løvbo Andersen 7 Окт 2020 в 12:53