Question

有一个带按钮的模板.. 单击该按钮，使用Jquery load（）加载另一个模板。

示例：

模板1：

<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的加载不会被渲染。我如何知道页面是否成功加载，以便更改页面来源....

Answer 1

尝试使用所需数据添加回复 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','...')
    });
});

Answer 2

尝试喜欢

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

OR

    $("#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);
        });
});

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

2 个答案: