如何單擊一個div并讓它打開一個目標div，然后在我單擊第三個div時關閉目標div？

我有一個包含 20 張圖片的畫廊，每張圖片對應一個帶有文本的 div。當我單擊影像時，應該會出現文本。當我點擊下一張圖片時，該圖片文本應該會出現，同時關閉我點擊的第一張圖片中的前一個文本 div。

因此，一次只能看到一個文本框。

到目前為止，我有這個：

attachToggleListener("leifr","rosenvold");
attachToggleListener("damians","smith");
attachToggleListener("megan","adam");

 function attachToggleListener (buttonID, divID) {
  var myTrigger = document.getElementById(buttonID);
  if (myTrigger != null) {
    myTrigger.addEventListener("click", toggleDiv);
    myTrigger.targetDiv = divID;?
    }
   }

 function toggleDiv(evt) {
   var target = document.getElementById(evt.currentTarget.targetDiv);
    if (target.style.display === "block")
        { target.style.display = "none"; }
    else
        { target.style.display = "block"; }
   }

當我單擊影像時出現文本，但當我單擊下一個影像時它不會關閉。就像現在一樣，我可以單擊 4 個影像，然后會出現 4 個文本 div，并且只有在我單擊使其出現的影像時才會被洗掉。

我再次期待的是單擊影像“leifr”>文本框出現“rosenvold”>單擊第二個影像“damians”>第二個文本框出現“smith”而第一個文本框“rosenvold”消失

uj5u.com熱心網友回復：

您可以修改您的 toggleDiv 函式以讀取所有可能的 div。我建議你做兩件事。

1. 為您的 div 添加一個類。比如說image_helper_text。

2. 修改您的 toggleDiv 函式看起來像

   function toggleDiv(evt) {
       var target = document.getElementById(evt.currentTarget.targetDiv);
       var targets = document.getElementsByClassName("image_helper_text");
   
       // This will remove all other divs.
       if (targets && Array.isArray(targets) && targets.length) {
         targets.forEach((each) => {
         if (
           each.id !== evt.currentTarget.targetDiv &&
           each.style.display === "block"
         ) {
            each.style.display = "none";
           }
         });
       }
       if (target.style.display === "block") {
         target.style.display = "none";
       } else {
         target.style.display = "block";
       }
   }
   

uj5u.com熱心網友回復：

這是一個關于如何在影像標題之間切換的基本示例。您必須跟蹤當前可見的影像標題 ( previousCaption)，然后在單擊新影像時，只需隱藏previousCaption并顯示新影像。

const images = document.querySelectorAll(".image");
let previousCaption = null; //currently visible image caption
images.forEach((img) => {
  const caption = img.querySelector(".caption");
  img.addEventListener("click", () => {
    if (previousCaption) previousCaption.classList.toggle("hide");
    caption.classList.toggle("hide");
    previousCaption = caption;
  });
});

body {
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

.image {
  height: 100px;
  width: 100px;
  outline: 1px solid;
}

.hide {
  visibility: hidden;
}

<div class="image">
  <div class="caption hide">caption1</div>
</div>
<div class="image">
  <div class="caption hide">caption2</div>
</div>
<div class="image">
  <div class="caption hide">caption3</div>
</div>

uj5u.com熱心網友回復：

回復

這是另一種方法。

HTML

<button data-target-id="470bec9d-a334-46cb-a7ff-01f4369120a7">Show Image #1</button>
<div id="470bec9d-a334-46cb-a7ff-01f4369120a7" class="">
  <label>Image #1</label>
  <img src="https://cdn-icons-png.flaticon.com/512/8711/8711519.png">
</div>
<br>
<br>
<!-- ... etc ... -->

CSS

img {
  max-width: 100px;
}

div {
  display: none;
}

div.show {
  display: block;
}

JS

// Data
const dataList = [
    { image: 'https://cdn-icons-png.flaticon.com/512/8711/8711519.png', text: 'Image #1' },
  { image: 'https://cdn-icons-png.flaticon.com/512/8711/8711531.png', text: 'Image #2' },
  { image: 'https://cdn-icons-png.flaticon.com/512/8711/8711524.png', text: 'Image #3' },
  { image: 'https://cdn-icons-png.flaticon.com/512/8711/8711522.png', text: 'Image #4' },
  { image: 'https://cdn-icons-png.flaticon.com/512/8711/8711521.png', text: 'Image #5' },
];

// Loop through data and render on screen
for (const data of dataList) {
  const { image, text } = data;
  // Generate Random ID
  const id = crypto.randomUUID();

  // Create Button
  const btn = document.createElement('button');
  btn.setAttribute('data-target-id', id);
  btn.innerText = `Show ${text}`;
  document.body.appendChild(btn);

  // Create Div with data
  const el = document.createElement('div');
  el.setAttribute('id', id);
  el.innerHTML = `<label>${text}</label><img src="${image}">`;
  document.body.appendChild(el);

  // Create Spacers ( new lines )
  const br = document.createElement('br');
  document.body.appendChild(br.cloneNode());
  document.body.appendChild(br.cloneNode());
}

// Attach Event Listener to buttons
function attachButtonListeners() {
  const buttons = document.getElementsByTagName('button');
  for (const button of buttons) {
    button.addEventListener('click', toggleShowHide);
  }
}

// show / hide div with data
function toggleShowHide({ target }={}) {
  const { targetId } = target.dataset;
  const div = document.getElementById(targetId);
  if (div.classList.contains('show')) {
    div.classList.remove('show')
  } else {
    div.classList.add('show')
  }
}

// Run event listener
attachButtonListeners();

標籤：javascriptdom切换添加事件监听器

上一篇：通過Javascript動態添加后洗掉表行

下一篇：即使值發生變化，如何使網格保持固定大小？