Попытка заменить имя файла изображения на jQuery - PullRequest
Новая
       0

Попытка заменить имя файла изображения на jQuery

1 голос
/ 09 мая 2020

Я пытаюсь захватить имя изображения и заменить его. От default.jpg до maxresdefault.jpg. Однако сценарий, который я использую, выдает ошибку, когда мне кажется, что он должен работать.

HTML: 

<a href="https://xxxxxxxxx.html" rel="nofollow" target="_self" title="Sample post with one video, part three">
  <div class="related-posts-thumb" itemprop="thumbnailURL" style="background: url(https://img.youtube.com/vi/iBy8UdG3VOo/default.jpg)"></div>
</a>

jQuery: 

<!-- LET'S IMPROVE IMAGE QUALITY OF YOUTUBE THUMBNAILS IN THE RELATED POSTS -->
$('#main-content #Blog1 article .related-posts .related-content article .related-posts-thumb').each(function() {
  $(this).attr("src", $(this).attr("src").replace("default.jpg", "maxresdefault.jpg"));
});

Это возвращает ошибку: Cannot read property 'replace' of undefined

Просто для сравнения, сценарий ниже того, который не работает, похож на сценарий, который я использую, и он отлично работает: 

<!-- LET'S IMPROVE IMAGE QUALITY OF AVATARS IN THE COMMENTS -->
$('#main-content #Blog1 article #comments .comment .avatar-image-container img').each(function() {
  $(this).attr("src", $(this).attr("src").replace("s35", "s72"));
});

Почему скрипт не работает? Два похожих скрипта, один работает, а другой нет. Я даже попробовал упомянутый здесь при stackoverflow, но у него все еще та же проблема.

Ответы [ 3 ]

1 голос
/ 09 мая 2020

В показанном HTML div использует свой атрибут style для изображения.

Второй сценарий работает, потому что он заменяет элемент src тега img.

Поскольку div, которое вы пытаетесь изменить, не имеет атрибута src, он undefined и поэтому не отвечает на метод, который вы пытаетесь вызвать.

Попробуйте следующее: 

$('#main-content #Blog1 article .related-posts .related-content article .related-posts-thumb').each(function() {
  $(this).attr('style', $(this).attr('style').replace('default.jpg', 'maxresdefault.jpg'));
});
1 голос
/ 09 мая 2020

Вы пытаетесь изменить атрибут sr c, но нет тега с атрибутом sr c. В качестве примера я добавил тег img ниже. 

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<html>
<body>
<a href="https://xxxxxxxxx.html" rel="nofollow" 
   target="_self" 
   title="Sample post with one video, part three">
  <div class="related-posts-thumb"     
  itemprop="thumbnailURL" 
  style="background: url(https://img.youtube.com/vi/iBy8UdG3VOo/default.jpg); width:150px; height:100px;">
    content
  </div>
  Image tag with src attribute: 
  <br>
  <img id="myImg" src='https://img.youtube.com/vi/iBy8UdG3VOo/default.jpg' />
</a>
</body>

Если вы хотите изменить фон тега стиля, вместо этого отредактируйте этот атрибут. это должно работать для стиля: 

$('.related-posts-thumb').each(function() {
  console.log('div style'+ $(this).attr("style") )
  myBgStyle=$(this).attr("style").replace("default.jpg", "maxresdefault.jpg");
  console.log('new bg style: '+myBgStyle)
  $(this).attr('style',myBgStyle);
});



  mySrc=$('#myImg').attr("src").replace("default.jpg", "maxresdefault.jpg");
  console.log('new image source: '+mySrc);
  $('#myImg').attr("src", mySrc);

См. здесь:

https://jsbin.com/naqucipaza/edit?html, js, output

0 голосов
/ 09 мая 2020

Вторая строка должна быть проще: 

$(this).attr("src", "maxresdefault.jpg"));

И в случае, если вы хотите применить это только к изображениям, которые имеют атрибут src "source.jpg", вы должны определить это в селекторе , поэтому должно быть 

$('#main-content #Blog1 article .related-posts .related-content article .related-posts-thumb[src="source.jpg"]').each(function() {
   $(this).attr("src", "maxresdefault.jpg"));
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...