從（非影像）專案串列中更改imgsrc？

我想做的事情感覺應該很簡單，但我還沒有找到正確的方法。

說我有這樣的事情：

.list {
  float: left;
  width: 200px;
  height: 500px;
  overflow-y: auto;
}

.show {
  float: right;
  width: 500px;
  height: 500px;
}

.display {
  max-width: 500px;
  max-height: 500px;
  width: auto;
  height: auto;
}

<div class="container" style="width: 700px;">
  <div class="list">
    <li>img1.jpg</li>
    <li>img2.jpg</li>
    <li>img3.gif</li>
    <li>img4.png</li>
  </div>
  <div class="show">
    <img src="img1.jpg" class="display" id="display">
  </div>
</div>

單擊左側的串列項時，我希望右側的 img src 更改為串列項（或某些等效項）中顯示的文本。如果右側影像上有上一個和下一個箭頭以繼續滾動可用影像，則獎勵積分。

有點像燈箱畫廊，但它不是使用縮略圖，而是單擊文本或創建全尺寸元素的鏈接，而不是彈出燈箱，它只是更改頁面上的現有影像。

理想情況下，我想使用 vanilla javascript，但使用 jQuery 或其他東西也不是不可能的。

我在這方面不是很有經驗，并且主要是通過挑選現有代碼來學習的……對不起，如果這是一個愚蠢的問題，哈哈。

uj5u.com熱心網友回復：

您可以在每個 li 元素上添加 javascript 代碼，并在 li 元素本身中發送“this” updateImage(this)。我正在使用一個帶有占位符影像的網站，所以它看起來會有點不同。

顯示代碼片段

function updateImage(liElement) {
  const imgElement = document.querySelector('.show > img');

  // Your code should be something like: "https://www.yourdomain.com/images/"   liElement.textContent
  const imageSrc = `https://picsum.photos/id/${liElement.textContent}/200/200`;
  
  imgElement.src = imageSrc;
}

.container {
  display: flex;
}

.list {
  width: 200px;
  cursor: pointer;
  padding: 0.25rem;
}

.display {
  max-width: 500px;
  max-height: 500px;
}

<div class="container">
  <div class="list">
    <li onclick="updateImage(this)">237</li>
    <li onclick="updateImage(this)">240</li>
    <li onclick="updateImage(this)">100</li>
    <li onclick="updateImage(this)">301</li>
  </div>
  <div class="show">
    <img src="https://picsum.photos/id/237/200/200" class="display" id="display">
  </div>
</div>

您還可以在ul標簽上添加一個單擊偵聽器，并使用 event.target 來獲取單擊的 li。

這是一種更加動態的方法，因為您不需要添加onclick="updateImage(this)"每個li標簽，而且它會創建更清晰的 HTML 代碼。

快樂編碼！

顯示代碼片段

const listElement = document.querySelector('.list');

listElement.addEventListener('click', updateImage);

function updateImage(event) {
  const imgElement = document.querySelector('.show > img');
  const liElement = event.target;
  
  // Your code should be something like: "https://www.yourdomain.com/images/"   liElement.textContent
  const imageSrc = `https://picsum.photos/id/${liElement.textContent}/200/200`;
  
  imgElement.src = imageSrc;
}

.container {
  display: flex;
}

.list {
  width: 200px;
  cursor: pointer;
  padding: 0.25rem;
}

list > li * {
  /* so only the li tag can be event.target, and none of it's children */
  pointer-events: none;
}

.display {
  max-width: 500px;
  max-height: 500px;
}

<div class="container">
  <div class="list">
    <li>237</li>
    <li>240</li>
    <li>100</li>
    <li>301</li>
  </div>
  <div class="show">
    <img src="https://picsum.photos/id/237/200/200" class="display" id="display">
  </div>
</div>

uj5u.com熱心網友回復：

這是一個起點，粗略地描述了 vanilla JS 的基本思想：

const list = document.querySelector('.list');
const img = document.querySelector('#display');
const onclick = e => {
  if (e.target.nodeName !== 'LI') return;
  img.src = e.target.textContent;
};

list.addEventListener('click', onclick);

和一個作業示例（我也在設定alt文本，因為影像src都是斷開的鏈接）

顯示代碼片段

const list = document.querySelector('.list');
const img = document.querySelector('#display');
const onclick = e=> {
  if(e.target.nodeName!=='LI') return;
  img.src = e.target.textContent;
  img.alt = e.target.textContent;
};

list.addEventListener('click', onclick)

.list {
  float: left;
  width: 200px;
  height: 500px;
  overflow-y: auto;
}

.show {
  float: right;
  width: 500px;
  height: 500px;
}

.display {
  max-width: 500px;
  max-height: 500px;
  width: auto;
  height: auto;
}

<div class="container" style="width: 700px;">
  <div class="list">
    <li>img1.jpg</li>
    <li>img2.jpg</li>
    <li>img3.gif</li>
    <li>img4.png</li>
  </div>
  <div class="show">
    <img src="img1.jpg" class="display" id="display">
  </div>
</div>

標籤：javascript css

上一篇：遍歷javascript中的物件陣列

下一篇：通過“查詢”物件修改查詢后如何獲取請求物件的修改后的URI？