Question

我正在尝试在多个ID中创建onlick函数，它在一个ID中起作用，但在其他ID中不起作用。我知道有人会建议我使用不同的onclick函数以及单独的ID，但是我只想在所有div元素中仅使用一个具有相同ID的onclick函数。

我希望有人用一个函数和一个id创建Javascript，以便在所有三个按钮中获得相同的结果。

只需检查下面的代码；

function copy() {
  document.getElementById("label").innerHTML = document.getElementById("mySelect").value;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <style>

  </style>
</head>

<body>

  <div class="dropdown">
    <p id="label">Mouse over me</p>
    <div class="dropdown-content">
      <select id="mySelect">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
      </select>

      <button onClick="copy();">Add</button>

    </div>
  </div>


  <div class="dropdown">
    <p id="label">Mouse over me</p>
    <div class="dropdown-content">
      <select id="mySelect">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
      </select>

      <button onClick="copy();">Add</button>

    </div>
  </div>

  <div class="dropdown">
    <p id="label">Mouse over me</p>
    <div class="dropdown-content">
      <select id="mySelect">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
      </select>

      <button onClick="copy();">Add</button>

    </div>
  </div>
</body>

</html>

Answer 1

您可以使用.closest()定位实际部分中的正确元素，例如

<button onClick="copy(this);">Add</button>

和

function copy(el) {
  var dd = el.closest('.dropdown');
  dd.querySelector('p').innerHTML =  dd.querySelector('select').value;
}

var copy = function(el) {
  var dd = el.closest('.dropdown');
  dd.querySelector('p').innerHTML =  dd.querySelector('select').value;
}

<div class="dropdown">
    <p id="label">Mouse over me</p>
    <div class="dropdown-content">
      <select id="mySelect">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
      </select>

      <button onClick="copy(this);">Add</button>

    </div>
  </div>

  <div class="dropdown">
    <p id="label">Mouse over me</p>
    <div class="dropdown-content">
      <select id="mySelect">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
      </select>

      <button onClick="copy(this);">Add</button>

    </div>
  </div>

如何在多个按钮中使用相同的功能以获得相同的结果？

1 个答案: