使用按鈕將img src的一部分替換為多個圖像

Question

我有這個簡單的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之間進行更改。

Answer 1

一個簡單的解決方案是通過給每個按鈕一個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">