javascript - 在少数几个上制作图像按钮

Question

所以我正在做一个网站，观众可以进去看看待售的裙子。当他们第一次加载页面时，一张图片被放入 div“Dress”，这就是裙子的正面。下面是四个按钮，每个按钮都有一个类，按钮的背景图像是裙子的另一面。我正在使用一个数据库来存储所有图像路径，以获取每件衣服的不同图像。但是现在，当您单击下拉菜单时，它想将其用作“图像按钮”。这是我的代码..我不确定如何解释它，但我不希望它认为下拉菜单是图像的另一个 href 标签，但现在它是一个实际链接。

<a href="<?php echo $Front;?>"><button class="Front"></button></a>
<a href="<?php echo $Back;?>"><button class="Back"></button></a>
<a href="<?php echo $Side;?>"><button class="Side"></button></a>
<a href="<?php echo $Other;?>"><button class="Other"></button></a>

<div id="Dress"><img src="" alt=""/></div>

<script>
var a = document.getElementsByTagName("a"),
popup = document.getElementById("Dress"),
img = document.getElementsByTagName("img")[0];

for(i = 0; i < a.length; i++)
{
   a[i].onclick = function(){
    popup.style.display="block";
    img.src = this.href;
    img.alt = this.innerHTML;
    return false;
}
}

我还有一些下拉代码。

<li><a href="Prom.php">Prom</a></li>
<li><a href="#">Ballgown</a></li>
<li><a href="#">Special Occassion</a></li>

当单击这些按钮转到另一个页面时，在 div“Dress”中它会显示链接的名称。像舞会、舞会礼服或特殊场合。有没有办法可以编辑我的脚本，让它只检查前四个 href？

Answer 1

这一行:

var a = document.getElementsByTagName("a")

正在获取页面上的所有 a 元素，包括下拉列表中的元素。你想做这样的事情:

HTML:

<div id="DressButtons">
    <a href="<?php echo $Front;?>"><button class="Front"></button></a>
    <a href="<?php echo $Back;?>"><button class="Back"></button></a>
    <a href="<?php echo $Side;?>"><button class="Side"></button></a>
    <a href="<?php echo $Other;?>"><button class="Other"></button></a>
</div>

JavaScript:

var buttons = document.getElementById("DressButtons"),
    a = buttons.getElementsByTagName("a")