1

我从 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>
4

3 回答 3

3

使用的问题$('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

另外，只需添加：

  • 检查您的网址是否正确
  • 如果它们正确，请在将它们附加到图像时检查 url
  • 检查您的ajax调用是否返回
  • 检查返回数据是否有效
  • 检查each它是否循环

console.log()能帮你

于 2012-04-21T07:26:32.637 回答
0

@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);
于 2012-04-21T07:31:58.647 回答
0

在您的通话中添加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);
?>
于 2012-04-21T07:32:52.637 回答