一鍵換圖優化if...else代碼-有解無憂

您好，有沒有其他方法可以獲得與我們看到的相同結果目標是：使用一個按鈕和功能更改“src”屬性

<img id="image" src="path of picture1" width="160" height="120">
<button type="button" onclick="test()">over here </button>

<script>
  let smile = true  
  let test = () => {
    if (smile == true) {
      document.getElementById("image").src = "path of picture2";
      smile = false
    } else {
      document.getElementById("image").src = "path of picture1";
      smile = true
    }
  }
</script>

每當我單擊按鈕時，瀏覽器都會顯示 picture2 然后如果我再次單擊會顯示 picture1 這可以一遍又一遍地完成，請為此分享您的解決方案

uj5u.com熱心網友回復：

這是另一個解決方案，只有 5 行 JS。它使用 if-else 單行代碼，可以在此處找到詳細指南。

我還使用了 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>

希望有幫助:)

uj5u.com熱心網友回復：

我試圖理解您的問題，即您想要相同的目標但采用另一種代碼方式：您可以使用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>

uj5u.com熱心網友回復：

我提出了一種通用方法，可以在主要（可能是 OP 的“微笑”狀態）和次要（“不微笑”）來源之間切換影像源。

然后，一個實作使用data-*全域屬性，如 eg data-primary-toggle-src，data-secondary-toggle-src可能data-toggle-state還有這樣一個影像元素的相關dataset屬性，用于讀取要交替的影像源和寫入當前切換狀態（例如'primary'versus '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"
/>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/534952.html

標籤：javascript网页格式主场

上一篇：被重新解釋為子類的父類能否在其函式中使用子類的函式？

下一篇：在Javascript中將HTML檔案作為字串參考