Question

我从Jquery制作的AJAX调用中获得此响应

[/Uploaded Files/190420120611171146Wj.jpg, Uploaded Files/IMG4040hY.jpg, /Uploaded Files/a2124.jpg]

这是我的JQuery响应

<script type="text/javascript">
$(document).ready(function(){
    $.ajax({
        url  : '<%=getChartData%>',
        success : function(data){
                $.each(data, function(index, item) {
                $('img').eq(index).attr('src', item);
             });


        }
    });

});
</script>

这是带图像的div标签

<div><a href="#"><img src=""   /></a></div>
<div><a href="#"><img src=""   /></a></div>
<div><a href="#"><img src=""   /></a></div>
<div><a href="#"><img src=""   /></a></div>

我尝试了上述内容，但我无法将这些值替换为图像

更新：

这是我的div容器

<div id="fp_thumbContainer">
                <div id="fp_thumbScroller">
                    <div class="container">
                        <div class="content">
                            <div><a href="#"><img src=""   /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src=""   />  </a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src=""   />  </a></div>
                        </div>

Answer 1

使用$('img')的问题在于它会在页面中获取所有图像。假设你有这个HTML：

<img src="foo" />  <!-- this is eq(0) -->
<img src="foo" />  <!-- this is eq(1) -->
<img src="foo" />  <!-- this is eq(2) -->

<!-- target images -->
<div><a href="#"><img src="" /></a></div>  <!-- this is eq(3) -->
<div><a href="#"><img src="" /></a></div>  <!-- this is eq(4) -->
<div><a href="#"><img src="" /></a></div>  <!-- this is eq(5) -->

当您执行$('img')并且在目标图像之前有图像时，它们就是您要替换的图像，而不是您的实际目标。循环遍历数组时，索引从0开始。如果你在目标图像之前有这些图像...你知道会发生什么。

确保您正在定位正确的图片，使您的选择器更具体，例如$('div a img')“如果这些目标图片有父母，则”获取div中的所有图像“或更好，使用它作为基础，如$('#parent_id img')，即“获取父容器中的所有图像”，如：

$('#fp_thumbScroller img');  //get all img from fp_thumbscroller

另外，只需添加：

检查您的网址是否正确
检查网址是否正确附加到图片
检查您的ajax调用是否返回
检查返回数据是否有效
检查each是否循环

console.log()可以帮助您

Answer 2

@ user1253847如果你从服务器获取图像src那么为什么不写下整个div html如下..

制作div包装

<div id="imagewrapper"></div>

并将div和图像添加到..

中

$(document).ready(function(){
var content = "";
$.ajax({
    url  : '<%=getChartData%>',
    success : function(data){
            $.each(data, function(index, item) {
            content += "<div><a href='#'><img src=" + item + "   /></a></div>";
         });
       $("#imagewrapper").html(content);
    }
  });
});

或追加

$("#imagewrapper").append(content);

Answer 3

在您的dataType: "json"电话中添加AJAX选项，如下所示：

$(document).ready(function(){
    $.ajax({
        dataType: 'json',
        url     : '<%=getChartData%>',
        success : function(data){
                $.each(data, function(index, item) {
                $('#fp_thumbContainer #fp_thumbScroller').find('img').eq(index).attr('src', item);
             });
        }
    });
});

即使这不起作用，然后检查它应该是JSON响应：

["\/Uploaded Files\/190420120611171146Wj.jpg","Uploaded Files\/IMG4040hY.jpg","\/Uploaded Files\/a2124.jpg"]

例如在php中就像：

<?php
  $arr = array("/Uploaded Files/190420120611171146Wj.jpg", "Uploaded Files/IMG4040hY.jpg", "/Uploaded Files/a2124.jpg");
  echo json_encode($arr);
?>

如何通过JQuery将值替换为img标记

3 个答案: