如何使用 jquery 选择具有或不具有特定“alt”属性的图像

Posted 2023-05-09

【中文标题】如何使用 jquery 选择具有或不具有特定“alt”属性的图像

【英文标题】：How to select an image having or not having particular 'alt' attribute using jquery

【发布时间】：2019-07-07 00:18:07

【问题描述】：

我有许多 .png 图像，并希望在提供替代文本的地方获得提及的名称，如果在 alt 标记中未提及，则应显示“png-image”。

以下代码只是将所有 png 图像的替代文本“png-image”。

假设我有一个图片的替代文本，即alt="facebook"，它应该显示alt="facebook"，而不是alt="png-image"。

通过查看源它显示alt="facebook" 代替alt="png-image"

<script type="text/javascript">
    (function ($) 
        $(document).ready(function() 
            // apply Image alt attribute
            $('img[src$=".png"]').attr('alt', 'png-image');
        );
    (jQuery));
</script>

【问题讨论】：

假设我有一个 png 图像 它应该显示 代替 "png-image" 但在查看源它显示 "png-image" 代替 .

【参考方案1】：

您可以使用.each 方法循环所有带有.png 在其src 末尾的图像。然后，您可以在每个图像上检查它是否具有alt 属性，使用：

if(!$(this).attr('alt'))

如果图像当前没有alt，则此if 语句将运行，因此您可以将自己的alt 属性添加到图像。

请参阅下面的工作示例：

$(document).ready(function() 
  $('img[src$=".png"]').each(function() 
    if (!$(this).attr('alt')) // check if current image tag has alt attribute
      $(this).attr('alt', 'png-image'); // if it doesn't add 'png-image' alt attribute
  )
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="foo.png" /><br />
<img src="bar.png"  /><br />
<img src="foo2.png"  /><br />
<img src="foo.png" />

这适用于 alt 属性未设置或设置为空（即：alt=""）的两种情况

【参考方案2】：

您可以在当前选择器中添加[alt=""]选择器

(function($) 
  $(document).ready(function() 
    // apply Image alt attribute
    $('img[src$=".png"][]').attr('alt', 'png-image');

  );

(jQuery));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src='https://images.pexels.com/photos/599708/pexels-photo-599708.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' alt='image'>
<img src='https://fnetobits.s3.amazonaws.com/galleries/boyerfuneralhome/1819974/1138985594.png' alt=''>

【参考方案3】：

您可以在 JQuery 中使用基于属性的选择器来获取所有没有 alt 属性的 img 标签，

$(document).ready(function() 
    $('img[src$=".png"][alt='']').attr('alt','png-image');
)

【讨论】：

感谢您的及时回复先生，我想知道上述代码是否适用于这两种情况，即如果提到 ，那么它将显示“abcd”作为替代文本，但如果 alt 是没有提到它会显示 png-image。

是的，它将选择所有没有alt属性的图像，并将“png-image”设置为alt。