繁体   English   中英

如何使用jQuery或PHP更改img src目录或图像文件名

[英]How to change img src directory or image file name with jquery or PHP

我想更改图像路径目录或通过将类添加到父容器来附加图像文件。

示例:如果我将“ large”类添加到父img容器,则希望它附加img文件名或更改img路径。

   src="/images/services/image.jpg" changed to src="/images/services/image-large.jpg"

   or

   src="/images/services/image.jpg" changed to src="/images/services/large/image.jpg"

   ...............................................................................



     default, no class:

        <div>
            <img src="/images/services/image.jpg" alt="" />
        </div>

     Option 1, with class:

        <div class="large-image">
            <img src="/images/services/image-large.jpg" alt="" />
        </div>


     Option 2, with class:


        <div class="large-image">
            <img src="/images/services/large/image.jpg" alt="" />
        </div>

例如这样,使用lastIndexOf

$function() {
  var img = $(".large-image > img").each(function() { // for each img found
    var src = $(this).attr("src"); // get the src
    var path = src.substring(0,src.lastIndexOf('/')); // get the path from the src 
    var fileName = src.substring(src.lastIndexOf('/')); // and filename
    var newSrc = path+"/large"+fileName; // re-assemble   
    // or change filename:
    // var newSrc = path+"/"+fileName.replace(".jpg","-large.jpg"); // re-assemble   

    $(this).attr("src",newSrc);
  });
});

您可以使用jquery更改src,对其进行拆分并添加新文件夹

<div class="large-image">
     <img src="/images/services/image.jpg" alt="" />
</div>

$('.large-image > img').each(function(){
     var msrc=$(this).attr('src');
     msrc=msrc.split('/');     //images, services, image.jpg
     var lastelem = msrc.pop();  //images, services     // lastelem: image.jpg
     msrc.push('large');     //images, services, large   // lastelem: image.jpg 
     msrc.push(lastelem);    //images, services, large, image.jpg
     msrc=msrc.join('/');  //"images/services/large/image.jpg"
     $(this).attr('src', msrc);
})

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM