javascript - Javascript如何为从PHP foreach循环创建的一系列按钮创建一个切换按钮

Question

我有一个画廊程序，每个图像上都有按钮。每个按钮都用于打开一个菜单，并且每个图像的菜单都是相同的（这是一个简单的文件夹列表，用于将图像移动到其中）。我有一个 PHP foreach 循环，它能够为每个按钮分配不同的 js 函数名称，以便能够为每个图像设置一个切换按钮。

我希望有人可以说明如何为此实现更好的解决方案，而不是让 foreach 循环分配一个不同的函数名称，例如：<button onclick="function1()"></button>、、<button onclick="function2()"></button>等等。这是因为可能有多达 200 个不同的图像，这将需要编写多达 200 个不同的 javascript 函数。

必须有另一种方法将相同的 js 功能分配给任何和所有分配的按钮。

我遇到的问题是，如果我只有 1 个功能；每当我点击第一张图片时，就会弹出菜单，这很棒。但是当我单击以下或任何其他图像的按钮时，它只会再次打开第一张图像上的菜单，而不会打开所选图像上的菜单。

因此，例如，我希望能够拥有：<button onclick="function()"></button>，并且应该能够在任何图像按钮上打开菜单。

必须有一个更简单的解决方案，而不是写出 200 个 js 函数。

提前致谢。

我的PHP代码：

<button onclick="toggle_pinit()" type="button" id="pinit_button"><img src="1.png"/></button>

和我的 Javascript 代码：

function toggle_pinit() 
{
    var button = document.getElementById('pinit_button');
    {
        var div = document.getElementById('pinit_menu'); // display select_show
        if (div.style.visibility == 'hidden') 
        {
            div.style.visibility = 'visible';
        }
        else 
        {
            div.style.visibility = 'hidden';
        }
    }
}

标签： javascriptphp

Answer 1

首先，ID 应该是唯一的。如果应该有多个元素，请改用一个类。然后，直接在 HTML 中使用 JS 并不是一个好习惯。将 HTML 与样式和脚本分开。

话虽如此，这就是我的做法：

// Wait until the document is loaded
window.addEventListener('DOMContentLoaded', function() {
  // Find all pin buttons and put them into an iterable Array
  var pinBtns = Array.from(document.querySelectorAll('.pinit_button')),
      // Find the menu
      pinMenu = document.getElementById('pinit_menu'),
      // Just for the demo
      pinSrc = document.getElementById('src'),
      selectedSrc = '';
      
  // For each of the buttons
  pinBtns.forEach(function(btn) {
    // Listen for clicks on them
    btn.addEventListener('click', togglePin);
  });
  
  // Do whatever you want here
  function togglePin(e) {
    // Get the src of the clicked image
    var newSrc = e.target.src;
    // If it was already selected, close the menu
    if (selectedSrc === newSrc) {
      pinMenu.classList.remove('open');
      // Reset the image src
      selectedSrc = '';
    // Otherwise, open it
    } else {
      pinMenu.classList.add('open');
      // Show the src in the menu's text
      pinSrc.innerText = e.target.src;
      // Store it for later use
      selectedSrc = newSrc;
    }
    
  }
});

body {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

.pinit_button {
  cursor: pointer;
}

#pinit_menu {
  margin: 1em 0;
  padding: .5em;
  background: #0072ff;
  color: #fff;
  display: none;
}

#pinit_menu.open {
  display: block;
}

<p>Click on an image:</p>
<button class="pinit_button"><img src="https://placeimg.com/50/50/animals"></button>
<button class="pinit_button"><img src="https://placeimg.com/50/50/arch"></button>
<button class="pinit_button"><img src="https://placeimg.com/50/50/nature"></button>
<button class="pinit_button"><img src="https://placeimg.com/50/50/people"></button>
<button class="pinit_button"><img src="https://placeimg.com/50/50/tech"></button>

<div id="pinit_menu">Here you can do whatever you need, knowing that the image you clicked on has this src: <span id="src"></span></div>