如何在不使用 if 语句的情况下切换图像的“src”属性？

问题描述 投票：0回答：3

我想通过单击按钮来更改标签的 src。目前，我使用 if-else 语句在两个图像之间切换，但我认为有更专业的方法可以达到相同的结果。

这是我当前的代码：

let smile = true  
let test = () => {
   if (smile == true) {
     document.getElementById("image").src = "https://images.freeimages.com/images/large-previews/adb/fruit-in-a-bowl-1637721.jpg";
      smile = false
    } 
 else {
     document.getElementById("image").src = "https://images.freeimages.com/images/large-previews/a33/fresh-red-ripe-strawberries-1641723.jpg";
     smile = true
    }
}
 <img id="image" src="https://images.freeimages.com/images/large-previews/a33/fresh-red-ripe-strawberries-1641723.jpg" width="160" height="120">
 <button type="button" onclick="test()">change!</button>

问题：

如何以更专业的方式在不使用if语句的情况下切换图像的src属性？

任何使代码更清晰、更高效的建议或改进将不胜感激！

javascript html
3个回答
1
投票

这是另一种解决方案，只有 5 行 JS。它使用 if-else 语句，可以在here找到详细指南。

我还使用了 HTML 数据属性而不是变量： 

data-smile="false"

我删除了元素的 id，因为您可以通过数据属性选择它。

let img = document.querySelector('[data-smile]');
img.onclick = () => {
    img.dataset.smile = img.dataset.smile == "true" ? "false" : "true";
    img.src = img.dataset.smile == "true" ? "https://i.imgur.com/jgyJ7Oj.png" : "https://i.imgur.com/PqpOLwp.png";
}
<div>
    <img src="https://i.imgur.com/PqpOLwp.png" data-smile="false">
</div>

希望有帮助:)

0
投票

我试图理解你的问题，你想要相同的目标，但以其他代码方式：你可以使用

img.onclick = () => { ... }

这是一个例子

let img = document.getElementById('img');
let isSmile
img.onclick = () => { 
  if(isSmile) {
    img.src = "https://i.imgur.com/PqpOLwp.png";
    isSmile = false
    }
  else {
    img.src = "https://i.imgur.com/jgyJ7Oj.png";
    isSmile = true
  }
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
            <img src="https://i.imgur.com/PqpOLwp.png" id="img">
        </div>
    </body>
</html>

0
投票

我提出了一种通用方法，可以在主要（可能是OP的“微笑”状态）和次要（“无微笑”）源之间切换图像源。

然后，实现会使用 

data-*
全局属性，例如
data-primary-toggle-src
、
data-secondary-toggle-src
，可能还有 
data-toggle-state
以及此类图像元素的相关 
dataset
 属性，用于读取要替换的图像源并写入当前切换状态（例如 
'primary'
与 
'secondary'）
）。

通用方法和封装的实现使该代码可重用（例如，在同一文档或其他项目中多次重用）。

function initializeToggleImages() {
  function toggleImageStates({ currentTarget: imgNode }) {
    const { dataset, src: currentSrc } = imgNode;

    // read.
    const primarySrc = dataset.primaryToggleSrc;
    const secondarySrc = dataset.secondaryToggleSrc;

    const isPrimaryState = (primarySrc === currentSrc);

    // write / toggle.
    imgNode.src = isPrimaryState && secondarySrc || primarySrc;
    dataset.toggleState = isPrimaryState && 'secondary' || 'primary';

    console.log({ toggleState: dataset.toggleState });
  }
  document
    .querySelectorAll('img[data-secondary-toggle-src]')
    .forEach(imgNode =>
      imgNode.addEventListener('click', toggleImageStates)
    )
}
initializeToggleImages();
body { margin: 0; }
img[data-secondary-toggle-src] { width: 160px; height: 120px; cursor: pointer; }
.as-console-wrapper { min-height: 100%; left: auto!important; width: 50%; }
<img
  src="https://i.picsum.photos/id/312/3888/2592.jpg?hmac=Lk5n0q19XuicLgvYPdAr5iML0VbkEADyqgJoHH_5nAs"
  data-primary-toggle-src="https://i.picsum.photos/id/312/3888/2592.jpg?hmac=Lk5n0q19XuicLgvYPdAr5iML0VbkEADyqgJoHH_5nAs"
  data-secondary-toggle-src="https://i.picsum.photos/id/248/3872/2592.jpg?hmac=_F3LsKQyGyWnwQJogUtsd_wyx2YDYnYZ6VZmSMBCxNI"
  title="toggle me"
/>

<img
  src="https://i.picsum.photos/id/515/4585/3439.jpg?hmac=WSSTufs9yyQUM8j16-DUr6nfucMBKIw7XHyMruISqeQ"
  data-primary-toggle-src="https://i.picsum.photos/id/512/3434/4340.jpg?hmac=DMhjASC-MZzL9bg0VcfO7vXLZscfbcjNLm7Rosmo0iw"
  data-secondary-toggle-src="https://i.picsum.photos/id/515/4585/3439.jpg?hmac=WSSTufs9yyQUM8j16-DUr6nfucMBKIw7XHyMruISqeQ"
  title="toggle me"
/>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.