javascript - 根据下拉菜单和图像链接更改图像

Question

在此扩展问题:How to use javascript to swap images with option change?

根据该问题中基于选择选项更改图像的方法，我还如何更改 <a></a>图像周围的链接以镜像显示的图像？

<script>
var colorUrlMap = {
  "Black/White" : "images/taylormade_purelite_standbag_bk.jpg",
  //Add more here
  "White/Red/Black" : "images/taylormade_purelite_standbag_wrb.jpg"
};
</script>
<select name="Color:"onchange="document.getElementById('myimage').src = colorUrlMap[this.value];">
  <option value="Black/White">Black/White</option>
  <!-- Add more here -->
  <option value="White/Red/Black">White/Red/Black</option>
</select>

<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage"> 

示例:

<a href="WHATEVER IS CHOOSEN BASED ON THE urlMAP"><img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
</a>

Answer 1

由于您现在正在做多项事情，因此最好将更改代码分解为自己的函数。但基本上你需要访问 href a 的属性标签与您访问 src 的方式相同关于img标签。

<script>
    var colorUrlMap = {
        "Black/White" : "images/taylormade_purelite_standbag_bk.jpg",
        //Add more here
        "White/Red/Black" : "images/taylormade_purelite_standbag_wrb.jpg"
    };

    function changeSelect(el) {
        document.getElementById('myimage').src = colorUrlMap[el.value];
        document.getElementById('link_id').href = colorUrlMap[el.value];
    }
</script>
<select name="Color:" onchange="changeSelect(this)">
    <option value="Black/White">Black/White</option>
    <!-- Add more here -->
    <option value="White/Red/Black">White/Red/Black</option>
</select>

<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage"> 

example:

<a id="link_id" href="WHATEVER IS CHOOSEN BASED ON THE urlMAP"><img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
</a>

您可能会注意到我还给出了 a一个id值。

更新

如果您需要从其他地方获取该链接，这里有一种可能的替代方法来编写脚本。我为每个颜色项添加了另一个级别的属性:a src和href以匹配您在 a 上更新的属性名称和img标签。

<script>
    var colorUrlMap = {
        "Black/White" : {
            "src" : "images/taylormade_purelite_standbag_bk.jpg",
            "href" : "your link here"
        },
        //Add more here
        "White/Red/Black" : {
            "src" : "images/taylormade_purelite_standbag_wrb.jpg",
            "href" : "your other link here"
        }
    };

    function changeSelect(el) {
        document.getElementById('myimage').src = colorUrlMap[el.value].src;
        document.getElementById('link_id').href = colorUrlMap[el.value].href;
    }
</script>

更新2

要解决有关单选按钮的评论中的问题，是的。从您的代码示例中，当前您在 onclick 上提交了一个表单。广播事件。你需要改变这一点。 radio 的技巧但是，您只想使用所选单选按钮的值。如果您使用onchange radio 上的事件，在选择和取消选择时都会触发。

因此，如果您想对单选和选择使用相同的函数，您可以将 setter 行包装在 if 语句中:

function changeColor(el) {
    if (el.nodeName != "INPUT" || el.checked) {
        document.getElementById('myimage').src = colorUrlMap[el.value].src;
        document.getElementById('link_id').href = colorUrlMap[el.value].href;
    }
}

这应该适用于 select , input[type=radio] ，和input[type=checkbox] 。你可以把它放在 onclick 中, onchange ，或onkeyup处理程序。 ( onkeyup 当使用键盘更改值时很好。)