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来显示值。

Answer 2

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

<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>

Answer 3

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

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

您可以使用“事件”对象访问导致事件的元素的属性。

Answer 4

您必须从特定的按钮事件中捕获值：

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

不需要传递this。由于可以访问event并可以从中获取target元素。在按钮中，您可以只使用：onclick="mostrarValueCategoria()"和以下功能：

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

这是运行代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Click Events</title>
    <script>
        function mostrarValueCategoria(e) {
            var name = e.value;
            document.querySelector('.valueCategoria').innerHTML = name;
        }
    </script>
</head>

<body>
    <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>
</body>

</html>

Answer 5

调用函数时可以通过this，只需使用它即可获得点击的button值。即：

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

<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>

一次单击如何从同一个类中获取每个值

5 个答案: