Как получить значение только одной кнопки, которая была нажата в наборе кнопок, имеющих одинаковый класс в JavaScript? - PullRequest
Новая
       0

Как получить значение только одной кнопки, которая была нажата в наборе кнопок, имеющих одинаковый класс в JavaScript?

0 голосов
/ 08 октября 2019

Я работаю над заданием, и у меня возникают проблемы с получением значения атрибута только одной кнопки onclick. Единственная проблема заключается в том, что они совместно используют один и тот же класс и все запускают одну и ту же функцию со встроенным onclick. Поэтому, когда я перебираю все экземпляры этого класса, он вызывает все значения атрибутов в консоли при нажатии на любую кнопку, например, так: 

red
green
blue

Как получить значение атрибута только для кнопкия нажимаю на?

Я пытался использовать this, но, насколько я понимаю, невозможно использовать this с современным синтаксисом функции JS. Я изменил его на const inline = function() {...} и this все равно не будет работать. Есть ли другие способы для достижения этой цели?

Спасибо! 

<div>
    <h3>inline</h3>
    <button class="color" style="background-color: red; color: white;" type="button" onclick="inline()" data-value="red">Red</button>
    <button class="color" style="background-color: green; color: white;" type="button" onclick="inline()" data-value="green">Green</button>
    <button class="color" style="background-color: blue; color: white;" type="button" onclick="inline()" data-value="blue">Blue</button>
</div>

const inline = () => {
    let color = document.querySelectorAll('.color');
    // let color = this;
    for (let i = 0; i < color.length; i++) {
        console.log(color[i].getAttribute("data-value"));
    }
}

1 Ответ

0 голосов
/ 08 октября 2019

Вы можете пройти через event для вызова функции inline(), а затем использовать e.currentTarget, чтобы получить элемент кнопки, который вызвал событие. Таким образом, вы можете получить его цвет, используя dataset в качестве цели события.

См. Пример ниже: 

const inline = e => {
  let btn = e.currentTarget;
  let color = btn.dataset.value;
  console.log(color);
}
<div>
  <h3>inline</h3>
  <button class="color" style="background-color: red; color: white;" type="button" onclick="inline(event)" data-value="red">Red</button>
  <button class="color" style="background-color: green; color: white;" type="button" onclick="inline(event)" data-value="green">Green</button>
  <button class="color" style="background-color: blue; color: white;" type="button" onclick="inline(event)" data-value="blue">Blue</button>
</div>

Кроме того, если вы не хотите использовать event (из-за его хрупкости), вы можете пройти через this вместо event, что будет означать нажатие кнопки следующим образом: 

const inline = btn => {
  let color = btn.dataset.value;
  console.log(color);
}
<div>
  <h3>inline</h3>
  <button class="color" style="background-color: red; color: white;" type="button" onclick="inline(this)" data-value="red">Red</button>
  <button class="color" style="background-color: green; color: white;" type="button" onclick="inline(this)" data-value="green">Green</button>
  <button class="color" style="background-color: blue; color: white;" type="button" onclick="inline(this)" data-value="blue">Blue</button>
</div>

Однако часто не очень хорошая идея смешивать HTML и JS, так как вы должны разделить разметку и логику JS. Таким образом, вместо этого вам следует рассмотреть возможность использования прослушивателей событий в вашем коде JS, зацикливаясь на всех элементах кнопки: 

document.querySelectorAll(".color").forEach(btn => {
  btn.addEventListener("click", function() {
    const color = this.dataset.value;
    console.log(color);
  });
});
<div>
  <h3>inline</h3>
  <button class="color" style="background-color: red; color: white;" type="button" data-value="red">Red</button>
  <button class="color" style="background-color: green; color: white;" type="button" data-value="green">Green</button>
  <button class="color" style="background-color: blue; color: white;" type="button" data-value="blue">Blue</button>
</div>
...