如何更改动态加载模板的img路径

How to change path of img for dynamically loaded template

本文关键字：img 路径 何更改 动态 加载      更新时间：2023-09-26

创建一个button..点击按钮加载另一个模板使用Jquery load()。

的例子:

Template1: 

<div id='tp1'>
   <button>Load</button>
   <div class="sub"></div>
</div>

Template2: 

   <div id='tp2'>
       <img src='../abc/amd/aa.jpg' class="iPath"/>
       <img src='../edf/dfv/bb.jpg' class="iPath"/>
       <img src='../fgh/vbf/cc.jpg' class="iPath"/>
   </div>

现在我需要为所有图像更改tp2的src，但是每个图像的路径是不同的。

img1 path: ../qwe/afg/aa.jpg
img2 path: ../asd/zvb/bb.jpg
img3 path: ../zxc/qrt/cc.jpg
Jquery: 

 $(document).ready(function(){
    $('button').click(function(){
      $('.sub').load("../abbb.html");
      console.log($('.iPath'));
    });
});

但是这里的iPath是未定义的，因为没有呈现模板2的加载。如何知道页面是否成功加载，以便很容易更改页面的源....

尝试为load()添加一个回调，并提供所需的数据。

当请求完成时执行的回调函数。

$('.sub').load("../abbb.html",function(data){
    $(data).find('.iPath');
});

要更改图像的src，需要使用

设置属性
$('.sub').load("../abbb.html",function(data){
    $(data).find('.iPath').each(function(){
         $(this).attr('src','...')
    });
});

Try Like 

    $('img').each(function () {
        var src = $(this).attr('src');           
         $(this).attr('src', 'newsrc');           
    });

或

    $("#ID > img").each(function() {
      var src = $(this).attr('src');           
      $(this).attr('src', 'newsrc');           
    });
使用

加载

$(function()
{
        $("#div").load("page.html", function(responseText, statusText, xhr)
        {
                if(statusText == "success")
                        alert("Successfully loaded the content!");
                if(statusText == "error")
                        alert("An error occurred: " + xhr.status + " - " + xhr.statusText);
        });
});

相关文章：