單擊圖像時顯示ALT文本

Question

單擊圖像時如何顯示圖像的替代文本？ 我想我需要使用jQuery。

這是HTML代碼的示例：

<div id="images">
     <img src="/img/image.png" alt="Text-1">
     <img src="/img/image.png" alt="Text-2">
     <img src="/img/image.png" alt="Text-3">
     <img src="/img/image.png" alt="Text-4">
</div>

文本應顯示在單獨的div ：

<div id="show-text"></div>

但是一次只能顯示一個替代文本。 因此，通過單擊第一個圖像應顯示“ Text-1”，通過單擊第二個圖像，應將“ Text-1”替換為“ Text-2”。

Answer 1

我認為這就是您要尋找的。

  $("#images img").on("click", function() { $("#show-text").text($(this).attr("alt")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="images"> <img src="/img/image.png" alt="Text-1"> <img src="/img/image.png" alt="Text-2"> <img src="/img/image.png" alt="Text-3"> <img src="/img/image.png" alt="Text-4"> </div> <div id="show-text"></div> 

Answer 2

CSS解決方案？

img:focus::before {
    content: attr(alt);
}

您需要設置放置位置，依此類推，嚴格來說，這並不是對原始問題的答案-但這是另一種選擇。

Answer 3

在這里，當您單擊圖像時。 此jQuery腳本將單擊img，並獲取其屬性，然后將其顯示在div中。

 $('#images img').on('click', function(){ $('#show-text').html($(this).attr('alt')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="images"> <img src="/img/image.png" alt="Text-1"> <img src="/img/image.png" alt="Text-2"> <img src="/img/image.png" alt="Text-3"> <img src="/img/image.png" alt="Text-4"> </div> <div id="show-text"></div> 

Answer 4

這是解決方案：

您需要為每個圖像attach一個click事件處理程序，並使用alt屬性獲取其alt文本。 當您具有alt名稱時，應使用.text方法在show-text div中show-text 。

為了獲得屬性，您必須使用.attr方法。

 $('#images img').click(function(){ $('#show-text').text($(this).attr('alt')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="images"> <img src="/img/image.png" alt="Text-1"> <img src="/img/image.png" alt="Text-2"> <img src="/img/image.png" alt="Text-3"> <img src="/img/image.png" alt="Text-4"> </div> <div id="show-text"></div> 

Answer 5

對於可能不使用jQuery的未來查看者，這是一個相當簡單的示例，其中不使用任何庫或框架。 為了簡單起見，我使用了ECMAScript 2015語言規范中引入的一些語法糖語言功能，但是無需使用這些功能就可以輕松實現。

界

本示例描述了將事件偵聽器直接綁定到每個圖像的方法。 如果沒有動態添加或刪除圖像，或者需要排除某些圖像，則應使用此選項。

1. 選擇目標元素
2. 選擇圖像並將NodeList轉換為數組
3. 定義一個偵聽器函數，該函數將alt屬性的內容分配給目標Node對象的textContent屬性。
4. 迭代圖像，將事件偵聽器分配給每個圖像。
5. 利潤！

const target = document.getElementById('show-text');
const images = [...document.querySelectorAll('#images img')];
const listener = event => target.textContent = event.target.alt;
images.forEach(element => element.addEventListener('click', listener, false));

 const target = document.getElementById('show-text'); const images = [...document.querySelectorAll('#images img')]; const listener = event => target.textContent = event.target.alt; images.forEach(element => element.addEventListener('click', listener, false)); 

 img { cursor: pointer } 

 <div id="images"> <img src="http://placehold.it/100x100?text=1" alt="Text-1"> <img src="http://placehold.it/100x100?text=2" alt="Text-2"> <img src="http://placehold.it/100x100?text=3" alt="Text-3"> <img src="http://placehold.it/100x100?text=4" alt="Text-4"> </div> And the text should be shown in a separate div: <div id="show-text"></div> 

---

委托

本示例描述了偵聽公共父元素上的事件的方法。 如果將動態添加和刪除圖像，則應使用此方法。

1. 選擇目標元素
2. 選擇公共父元素
3. 定義一個偵聽器函數，該函數檢查以查看clicked元素是否為圖像，然后將alt屬性的內容分配給目標Node對象的textContent屬性。
4. 將偵聽器功能分配給公共父元素
5. 利潤！

const target = document.getElementById('show-text');
const images = document.getElementById('images');
const listener = event =>
  event.target.tagName === 'IMG' && (target.textContent = event.target.alt);
images.addEventListener('click', listener, true);

 const target = document.getElementById('show-text'); const images = document.getElementById('images'); const listener = event => event.target.tagName === 'IMG' && (target.textContent = event.target.alt); images.addEventListener('click', listener, true); 

 img { cursor: pointer } 

 <div id="images"> <img src="http://placehold.it/100x100?text=1" alt="Text-1"> <img src="http://placehold.it/100x100?text=2" alt="Text-2"> <img src="http://placehold.it/100x100?text=3" alt="Text-3"> <img src="http://placehold.it/100x100?text=4" alt="Text-4"> </div> And the text should be shown in a separate div: <div id="show-text"></div> 

---

緩存您的jQuery對象

如果您確實必須使用jQuery，則我不能足夠強調緩存jQuery對象的重要性。

當你有這樣的事情：

$('#images img').on('click', function(){
  $('#show-text').html($(this).attr('alt'));
});

每次單擊圖像時，您正在DOM中查詢與#show-text選擇器匹配的元素。 當您只有幾個項目時，這似乎並不重要，但是當您遇到DOM很大的情況時，這可能會花費越來越多的時間。

為了節省大量開銷，只需緩存jQuery對象，如下所示：

const target = $('#show-text');
const images = $('#images img');
images.on('click', event => target.text(event.target.alt));

（是的，我知道我改變了一些其他事情。我無能為力）