如何在不使用 if 語句的情況下切換圖像的“src”屬性？
[英]How to toggle the "src" attribute of an image without using an if-statement?
問題描述
問題是我想通過使用執行 if 的按鈕更改 img 標簽的 src，否則 function。但我認為我的代碼不專業，有更好的方法來完成同樣的工作。
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()">over here </button>3 個解決方案
解決方案1
1 已采納 2022-11-16 15:17:53
這是另一個解決方案，只有 5 行 JS。 它使用 if-else 單行代碼，可以在此處找到詳細指南。
我還使用了 HTML 數據屬性而不是變量： data-smile="false"
我刪除了元素的 id，因為您可以通過數據屬性將它設為 select。
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>
希望有所幫助:)
解決方案2
0 2022-11-16 14:45:13
我試圖理解您的問題，即您想要相同的目標，但采用另一種代碼方式：您可以使用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>
解決方案3
0 2022-11-16 16:13:11
我提出了一種通用方法，可以在主要（可能是 OP 的“微笑”狀態）和次要（ “不微笑” ）來源之間切換圖像源。
然后，一個實現使用data-*全局屬性，例如data-primary-toggle-src 、 data-secondary-toggle-src和可能的data-toggle-state以及此類圖像元素的相關dataset屬性來讀取交替使用圖像源並寫入當前切換 state（例如'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" />
如何在圖片標簽的src屬性內傳遞字符串 <img src=“”> 使用jQuery / JavaScript的？
[英]How to pass string inside src attribute of image tag <img src=“”> using jquery/javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.