单击图像时显示ALT-Text

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>

但是一次只能显示一个alt-text。所以点击第一张图片＆＃34; Text-1＆＃34;应该通过点击第二张图片来显示＆＃34; Text-1＆＃34;应替换为＆＃34; Text-2＆＃34;。

Answer 1

我认为这是你正在寻找的。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

CSS解决方案？

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

您需要设置展示位置等等，并不是对原始问题的严格答案 - 但它是另一种选择。

Answer 3

在此处，单击图像时。这个jQuery脚本将获取img点击并获取其属性，然后在div中显示它。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

这是解决方案：

您需要为每个图片attach click个事件处理程序，并使用alt属性获取alt文本。如果您拥有alt名称，则应使用show-text方法在.text div中显示。

要获取属性，您必须使用.attr方法。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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));

＆＃13;
＆＃13;
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));
＆＃13;
img { cursor: pointer }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

委托

此示例描述了在公共父元素上侦听事件的方法。如果动态添加和删除图像，则应使用此方法。

1. 选择目标元素
2. 选择公共父元素
3. 定义一个侦听器函数，该函数检查所单击的元素是否为图像，然后 - 如果是 - 将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);

＆＃13;
＆＃13;
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);
＆＃13;
img { cursor: pointer }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

缓存您的jQuery对象

如果你必须使用jQuery，我不能过分强调缓存jQuery对象的重要性。

当你有这样的事情时：

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

每次单击图像时，您都在查询与#show-text选择器匹配的元素的DOM。当你只有几个项目时，这似乎并不重要，但是当你遇到DOM很大的情况时，这可能需要花费越来越多的时间来完成。

为了节省大量开销，只需缓存jQuery对象，如下所示：

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

（是的，我知道我改变了一些其他的东西。我无法帮助自己）