[英]Replacing part of an img src for multiple images using buttons
我有这个简单的HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <button href="#" class="btn btn-primary">Small (32)</button> <button href="#" class="btn btn-danger">Medium (64)</button> <button href="#" class="btn btn-warning">Large (128)</button> <hr /> <img class="swap" title="jack-o-lantern" alt="jack-o-lantern" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f383.png"> <img class="swap" title="Christmas tree" alt="Christmas tree" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f384.png"> <img class="swap" title="fireworks" alt="fireworks" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f386.png"> <img class="swap" title="sparkler" alt="sparkler" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f387.png"> <img class="swap" title="sparkles" alt="sparkles" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/2728.png">
我正在尝试找出是否有可能通过单击代码片段顶部的按钮来使用javascript设置图像源。
例如-首次加载页面时,图片网址被硬编码为:
https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f383.png
但是,如果用户单击“ Small (32)
按钮,是否可以在不将页面加载到例如单个图像的情况下更新所有图像源URL:
https://cdn.jsdelivr.net/emojione/assets/3.1/png/32/1f383.png
相当于“中”和“大”按钮?
我已经搜索了例如替换img src的一部分,并找到了这篇文章:
使用此解决方案:
$(function(){
$('#myLink').click(function(){
$('img').each(function(){
var $this = $(this)
$this.attr('src',$this.attr('src').replace('gray','green'))
})
})
})
但是-就我而言,我不仅要用另一个替换一个值,还需要根据单击哪个按钮在32、64和128之间进行更改。
一个简单的解决方案是通过给每个按钮一个id来代表要更改此大小的数字,例如本示例
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <button href="#" id="32" class="btn btn-primary">Small (32)</button> <button href="#" id="64" class="btn btn-danger">Medium (64)</button> <button href="#" id="128" class="btn btn-warning">Large (128)</button>
现在添加一个脚本,该脚本通过其ID选择所有这些按钮,然后将侦听器添加到click事件,并通过选择所有图像来更改所有图像的src属性
这是完整的解决方案
const small = document.getElementById('32'); const medium = document.getElementById('64'); const large = document.getElementById('128'); // select all images const allImages = document.querySelectorAll('.swap') ; // this function takes number and change the src of all images function changeImagesSrc(number) { allImages.forEach(img=>{ // here we use regular expression to select the number and change it to a new one img.src = img.src.replace(/32|64|128/,number); }) } small.addEventListener('click',()=>{ changeImagesSrc(32); }) medium.addEventListener('click',()=>{ changeImagesSrc(64); }) large.addEventListener('click',()=>{ changeImagesSrc(128); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <button href="#" id="32" class="btn btn-primary">Small (32)</button> <button href="#" id="64" class="btn btn-danger">Medium (64)</button> <button href="#" id="128" class="btn btn-warning">Large (128)</button> <hr /> <img class="swap" title="jack-o-lantern" alt="jack-o-lantern" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f383.png"> <img class="swap" title="Christmas tree" alt="Christmas tree" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f384.png"> <img class="swap" title="fireworks" alt="fireworks" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f386.png"> <img class="swap" title="sparkler" alt="sparkler" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f387.png"> <img class="swap" title="sparkles" alt="sparkles" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/2728.png">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.