javascript - 根据下拉列表动态替换 'src' 和 'href' 标签

标签 javascript jquery html

我为选择框设置了“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>

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

最佳答案

应该找到图像的父级,在示例中是a容器,并通过$('#imageToSwap').parent().attr('href)将相应的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>

关于javascript - 根据下拉列表动态替换 'src' 和 'href' 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59555620/

相关文章:

javascript - 调用 javascript 加载函数和 Controller 操作

html - 类似谷歌的图标在移动设备中滚动——如何复制?

html - 类没有被赋予它的属性。限制?(html + css)

javascript - 在表单中动态添加数组文本框

javascript - 将 .html 文件的内容添加/注入(inject)到访问的每个网站 - Chrome 扩展?

javascript - 问题/错误 'Property ' 'xs' 在使用 tensorflow.js 的 Angular 项目中的类型 'TensorContainer' 上不存在

javascript - 如何从文本框中获取日期和时间选择器值?

javascript - 我有这个错误: Cannot read property 'value' of null, I dont understand why

javascript - 如何使用来自 Web 服务的 JSON 数据填充 Angular 中的表?

javascript - CoffeeScript/JavaScript : why assign a letter to a variable that has a number assigned?