Как выбрать изображение, имеющее или не имеющее определенный атрибут 'alt', используя jquery

Question

У меня много изображений .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>

Answer 1

Вы можете добавить [alt=""] селектор с текущим селектором

(function($) {
  $(document).ready(function() {
    // apply Image alt attribute
    $('img[src$=".png"][alt=""]').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=''>

Answer 2

Вы можете использовать селектор на основе атрибутов в JQuery, чтобы получить все теги img, не имеющие атрибута alt,

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

Answer 3

Вы можете использовать метод .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" alt="this is my own alt" /><br />
<img src="foo2.png" alt="this is my own alt2" /><br />
<img src="foo.png" />

Это будет работать в обоих случаях, когда атрибут alt либо не установлен, либо не задан (т.е.: alt="")