javascript - 一旦点击 JAVASCRIPT，如何从同一个类中获取每个值

Question

这是我的代码

            <div class="selecionar" onclick="abrirFiltroCategoria()">
                <p class="valueCategoria">Selecionar categoria</p>
            </div>
            <div class="button-group js-radio-button-group box__categoria" data-filter-group="color">
                <button class="button" data-filter=".red" value="Passeio" onclick="mostrarValueCategoria(this)">Passeio</button>
                <button class="button" data-filter=".blue" value="SUV/Pickup/4x4" onclick="mostrarValueCategoria(this)">SUV/Pickup/4x4</button>
                <button class="button" data-filter=".yellow" value="Van e Utilitário" onclick="mostrarValueCategoria(this)">Van e Utilitário</button>
                <button class="button" data-filter=".yellow" value="Caminhão e Carga" onclick="mostrarValueCategoria(this)">Caminhão e Carga</button>
            </div>

和我的js

    function mostrarValueCategoria() {
        var name = document.querySelector('.button').value;
        document.querySelector('.valueCategoria').innerHTML = name;
    }

我需要解决的问题是:在每次点击时，获取我点击的按钮的当前值，清除之前的值。

Answer 1

您将 this 作为参数传递，您可以在函数中使用它来获取当前值。

function mostrarValueCategoria(el) {
  console.log(el.value)
  document.querySelector('.valueCategoria').innerText = el.value;
}

<div class="selecionar" onclick="abrirFiltroCategoria()">
  <p class="valueCategoria">Selecionar categoria</p>
</div>
<div class="button-group js-radio-button-group box__categoria" data-filter-group="color">
  <button class="button" data-filter=".red" value="Passeio" onclick="mostrarValueCategoria(this)">Passeio</button>
  <button class="button" data-filter=".blue" value="SUV/Pickup/4x4" onclick="mostrarValueCategoria(this)">SUV/Pickup/4x4</button>
  <button class="button" data-filter=".yellow" value="Van e Utilitário" onclick="mostrarValueCategoria(this)">Van e Utilitário</button>
  <button class="button" data-filter=".yellow" value="Caminhão e Carga" onclick="mostrarValueCategoria(this)">Caminhão e Carga</button>
</div>

注意您可以使用innerText 代替innerHTML 来显示值。