jQuery：根据下拉选择更改图像时向图像添加超链接答案

【问题标题】：jQuery: add hyperlink to image when changing image depending on dropdown selectionjQuery：根据下拉选择更改图像时向图像添加超链接
【发布时间】：2017-03-02 01:03:52
【问题描述】：

这是我的代码：

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
</head>
<body>

<select id="my_select" name="select_name" class="order_form_select">
    <option data-img="" value="" disabled selected>Please select&nbsp;↓</option>
    <option data-img="1.jpeg" value="first">First</option>
    <option data-img="2.jpeg" value="second">Second</option>
    <option data-img="3.jpeg" value="third">Third</option>
</select>

<a href=""><img id="order_form_image" src=""></a>

<script>
document.getElementById("my_select").onchange = showFormatImage;
function showFormatImage() {
    $("#order_form_image").attr('src', $('select[name=select_name] option:selected').attr('data-img'));
    $('#img_src').html($("#order_form_image").attr('src'));
    return false;
}
</script>

</body>
</html>

根据下拉选择显示图像。到目前为止效果很好。我的目标是为该图像添加一个特定的超链接。

当用户选择“第一个”时，将显示一个名为 1.jpeg 的图像。这就像一个缩略图。当用户单击此图像时，将打开一个新窗口/选项卡 (target="_blank") 并显示一个名为例如的图像。 1_big.jpeg.

有人知道怎么做吗？

【问题讨论】：

标签： javascript jquery html image hyperlink

【解决方案1】：

您好，这是一个工作示例，希望对您有所帮助

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
</head>
<body>

<select id="my_select" name="select_name" class="order_form_select">
    <option data-img="" value="" disabled selected>Please select&nbsp;↓</option>
    <option data-img="1.jpeg" value="first">First</option>
    <option data-img="2.jpeg" value="second">Second</option>
    <option data-img="3.jpeg" value="third">Third</option>
</select>

<a id="link"  target="_blank" href=""><img id="order_form_image" src=""></a>

<script>
document.getElementById("my_select").onchange = showFormatImage;
function showFormatImage() {
    $("#order_form_image").attr('src', $('select[name=select_name] option:selected').attr('data-img'));
    $('#img_src').html($("#order_form_image").attr('src'));
    $('#link').attr('href','big_'+$('select[name=select_name] option:selected').attr('data-img'));
    return false;
}
</script>

</body>
</html>

【讨论】：

【解决方案2】：

给锚标签一个id：

<a href="" target="_blank" id="image_link"><img id="order_form_image" src=""></a>

那么你可以在图片发生变化时在href中使用jQuery：

function showFormatImage() {
    $("#order_form_image").attr('src', $('select[name=select_name] option:selected').attr('data-img'));
    $('#image_link').attr('href', $('select[name=select_name] option:selected').attr('data-img'));
    $('#img_src').html($("#order_form_image").attr('src'));
    return false;
}

【讨论】：