根据下拉列表动态替换“src”和“href”标签答案

【问题标题】：Dynamically replace both 'src' and 'href' tags based on drop down根据下拉列表动态替换“src”和“href”标签
【发布时间】：2020-01-02 04:06:24
【问题描述】：

我为选择框设置了“onchange”功能，该功能将根据选择的选项动态更改网页上的图像。这样用户就可以从下拉列表中选择一个房间，然后查看该房间的时间表。但是，显示的图像很小，所以我实现了灯箱程序，允许用户单击图像并将其放大。

我已经调整了我的 onchange 函数来更改最初显示的图像，但是当用户单击图像时，仍然会显示在 href 中声明的图像，因为该值不会被 onchange 更改功能。

我尝试了一些我认为可行的方法，但无济于事。有没有人可以确保下面显示的href 值始终与稍后在src 中显示的较小图像相匹配？

<select required id="roomfield" name="roomfield" onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].id); room()"> required>
 <option value=""></option>
 <option id="https://dat.ccits.org.uk/book/images/roomfield/c1.png" value="C1" roomname="test1">C1</option>
 <option id="https://dat.ccits.org.uk/book/images/roomfield/c2.png" value="C2" roomname="test2">C2</option>
 <option id="https://dat.ccits.org.uk/book/images/roomfield/c3.png" value="C3" roomname="test3">C3</option>
 <option id="https://dat.ccits.org.uk/book/images/roomfield/c8.png" value="C8" roomname="test4">C8</option>
 <option id="https://dat.ccits.org.uk/book/images/roomfield/c9.png" value="C9" roomname="test5">C9</option>
 <option id="https://dat.ccits.org.uk/book/images/roomfield/hall.png" value="Hall" roomname="testh">Hall</option>
 </select>

<a class="example-image-link" id="imageToSwap2" width="100%" href="https://dat.ccits.org.uk/book/images/roomfield/holder.png" data-lightbox="example-set" data-title="Click the right half of the image to move forward.">
  <img class="example-image" id="imageToSwap" src="https://dat.ccits.org.uk/book/images/roomfield/holder.png" alt="" />
</a>

关于document.getElementById('YOUR_ID').href = 'abraCaDabraDotCom'; 部分，我已阅读Replace image src and a href onclick，但似乎无法弄清楚如何将此解决方案实施到我现有的代码中。

【问题讨论】：

为什么要为id 属性使用完整的URL？至少，也为此使用数据属性。话虽如此：你的代码在哪里？当change 触发您的选择器时，我看不到任何应该更新<a href> 和<img src> 的JS。（并且不要使用onchange，使用适当的现代JS，并在JS 端使用addEventListener('change')。不是HTML4.01 属性。
@Mike'Pomax'Kamermans 我使用完整的 URL 作为 id，因为这是我遵循的指南告诉我的。它们是完整 URL 而不仅仅是“c1.png”的唯一原因是它们托管在单独的站点上。正如指南所说，更新图像的代码再次包含在“onChange”中。至于其他 cmets，我将研究实施这些。谢谢
那么你的向导告诉你去做非常有问题的事情。除非您需要在 JS 端访问这些元素，否则不要使用id 属性。如果没有，请不要设置它们。而您不需要，您只需要使用event.target.value 适当地设置您从select 的onchange 复制过来的value 属性。我强烈建议寻找新的教程来教授现代 HTML5+JS 模式，而不是将 1998 年 HTML 4.01 模式与考虑到 id 的用途甚至没有意义的东西混合在一起的东西。
我已经查看了我在开发过程中所做的笔记。该指南确实声明使用“价值”标签。但是，我必须修改和调整它，因为我已经有另一个函数可以查看每个下拉选项的 ID 标签。
改用value 属性并做正确的事情应该是微不足道的。做你未来的自己，可能还有以后需要使用你的代码的任何人，帮个忙：既然你仍然知道去哪里寻找，那就多花点时间来修复错误，这样你或其他人就不会花太多时间以后有更多时间来解决这个问题。

标签： javascript jquery html

【解决方案1】：

应在示例中找到图像的父级容器a，并将相应的href替换为$('#imageToSwap').parent().attr('href', this.options[this.selectedIndex].id)选择的值，如下所示：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select required id="roomfield" name="roomfield" onchange="$('#imageToSwap').parent().attr('href', this.options[this.selectedIndex].id);$('#imageToSwap').attr('src', this.options[this.selectedIndex].id); room()"> required>
 <option value=""></option>
 <option id="https://dat.ccits.org.uk/book/images/roomfield/c1.png" value="C1" roomname="test1">C1</option>
 <option id="https://dat.ccits.org.uk/book/images/roomfield/c2.png" value="C2" roomname="test2">C2</option>
 <option id="https://dat.ccits.org.uk/book/images/roomfield/c3.png" value="C3" roomname="test3">C3</option>
 <option id="https://dat.ccits.org.uk/book/images/roomfield/c8.png" value="C8" roomname="test4">C8</option>
 <option id="https://dat.ccits.org.uk/book/images/roomfield/c9.png" value="C9" roomname="test5">C9</option>
 <option id="https://dat.ccits.org.uk/book/images/roomfield/hall.png" value="Hall" roomname="testh">Hall</option>
 </select>

</br>
</br>
<a class="example-image-link" id="imageToSwap2" width="100%" href="https://dat.ccits.org.uk/book/images/roomfield/holder.png" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" id="imageToSwap" src="https://dat.ccits.org.uk/book/images/roomfield/holder.png" alt="" /></a>

【讨论】：

谢谢你！我已将此标记为答案，因为它是解决我的问题的最简单方法。其他建议也可能奏效，但这是当时最容易实施的。但是，我确实必须在结束“必需”属性之前删除“>”。

【解决方案2】：

通过将所有逻辑放入onchange 属性中，代码难以阅读且难以更改。这可以通过将其抽象到单独的脚本部分来解决。另一个可能的变化是使用数据集属性：(data-*) 来存储附加数据，例如选项的 url

const imageToSwap = document.querySelector('#imageToSwap');
const lightboxLink = document.querySelector('#imageToSwap2')

document.querySelector('#roomfield').addEventListener('change', e => {
 	const elem = e.currentTarget;
  const selectedUrl = elem.options[elem.selectedIndex].dataset.url;
	imageToSwap.setAttribute('src', selectedUrl)
  lightboxLink.setAttribute('href', selectedUrl)
})

<select required id="roomfield" name="roomfield" required>
 <option value=""></option>
 <option data-url="https://dat.ccits.org.uk/book/images/roomfield/c1.png" value="C1" roomname="test1">C1</option>
 <option data-url="https://dat.ccits.org.uk/book/images/roomfield/c2.png" value="C2" roomname="test2">C2</option>
 <option data-url="https://dat.ccits.org.uk/book/images/roomfield/c3.png" value="C3" roomname="test3">C3</option>
 <option data-url="https://dat.ccits.org.uk/book/images/roomfield/c8.png" value="C8" roomname="test4">C8</option>
 <option data-url="https://dat.ccits.org.uk/book/images/roomfield/c9.png" value="C9" roomname="test5">C9</option>
 <option data-url="https://dat.ccits.org.uk/book/images/roomfield/hall.png" value="Hall" roomname="testh">Hall</option>
 </select>

<br />
<br/>
<a class="example-image-link" id="imageToSwap2" width="100%" href="https://dat.ccits.org.uk/book/images/roomfield/holder.png" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" id="imageToSwap" src="https://dat.ccits.org.uk/book/images/roomfield/holder.png" alt="" /></a>

【讨论】：