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