代码之家 › 专栏 › 技术社区 › 4532066

使用按钮替换多个图像的img-src的一部分

html javascript

4532066 · 技术社区 · 7 年前

我有一个简单的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来设置图像源。

例如-当页面首次加载时,图像URL硬编码为:

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的一部分,并找到了以下文章:

Changing part of image's source

使用此解决方案:

$(function(){
  $('#myLink').click(function(){
    $('img').each(function(){
      var $this = $(this)
      $this.attr('src',$this.attr('src').replace('gray','green'))
    })
  })
})

但是-在我的例子中,我不仅要用另一个值替换一个值,还需要根据单击的按钮在32、64和128之间进行更改。

1 回复 | 直到 7 年前

mostafa tourad 7 年前

解决问题的一个简单方法是给每个按钮一个 身份证件 表示要更改此大小的数字,如下例所示

<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选择所有这些按钮,然后将侦听器添加到单击事件,并通过选择所有这些按钮更改所有图像的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">