时间戳

首页 > 解决方案 > 使用JS从多个img src标签中删除一个文件夹

javascript - 使用JS从多个img src标签中删除一个文件夹

问题描述

我有一个包含许多不同画廊类别的网站，它们显示较小的缩略图尺寸，直到屏幕宽度低于 1200 像素，之后我想显示完整尺寸。

图像显示如下：

<section class="gallery category1">
    <img id="cat1img1" src="cat1/small/img-1.jpg" alt="blah">
    <img id="cat1img2" src="cat1/small/img-2.jpg" alt="blah">
    etc...
</section>
<section class="gallery category2">
    <img id="cat2img1" src="cat2/small/img-1.jpg" alt="blah">
    <img id="cat2img2" src="cat2/small/img-2.jpg" alt="blah">
    etc...
</section>

我想要做的就是使用带有一些 jQuery 的 JS 媒体查询来从每个标签中删除“small/”而不列出每个 img，这样就可以自由地添加和删除它们而无需再次修改代码。

这是我尝试过的，但它没有更改 img url，尽管它确实触发了我的大小更改检查：

function galleryBreak(x) {
    if (x.matches) {
        $('.gallery').children('img').attr('src').replace('/small','')
        console.log('size change check');
    };
};
var x=window.matchMedia('(max-width: 1200px)')
galleryBreak(x)
x.addListener(galleryBreak)

标签： javascripthtmljquery

解决方案

您有多个 (2) 个画廊和多个图像。您需要遍历所有画廊的所有图像。像这样的东西

function changeImagePaths(theGallery) {
  var images = theGallery.querySelectorAll('img');
  images.forEach( image => {
      console.log('Path before: ', image.src)
      image.src = image.src.replace('/small','')
      console.log('Path AFTER: ', image.src)
  });
};

var x=window.matchMedia('(max-width: 1200px)')
var myGalleries = document.querySelectorAll('.gallery')
myGalleries.forEach( gallery => {
    if(x.matches) {
      changeImagePaths(gallery)
    }
});
<section class="gallery category1">
    <img id="img1" src="cat1/small/img-1.jpg" alt="blah">
    <img id="img2" src="cat1/small/img-2.jpg" alt="blah">
</section>
<section class="gallery category2">
    <img id="img1" src="cat2/small/img-1.jpg" alt="blah">
    <img id="img2" src="cat2/small/img-2.jpg" alt="blah">
</section>

JsFiddle 在这里玩

现在说了这么多，如果您可以更改 HTML，请使用响应式图像，它将向您显示您需要的所有内容，可以在图像标签中设置，例如：

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg"
     alt="Elva dressed as a fairy">

推荐阅读