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が正しいかどうかを確認してください
  • URL が正しい場合は、画像に追加されたときに 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 に答える