亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

顯示來自 ajax 的圖像 src

顯示來自 ajax 的圖像 src

PHP
慕虎7371278 2021-12-03 15:31:32
通過以下代碼請求 img src 的路徑:$.ajax({  url: 'api/catalogs.php?action=fetchimg&CatalogId=' + d.CategoryId,  type: 'GET',  dataType: "json",  success: function(response) {    var path = response.path;    console.log(path);    $.each(response, function(key, value) {      $("#images").attr('src', value.path);    })  },});但是代碼只顯示一張照片,API 返回多張照片并且需要顯示所有照片。為了顯示我使用下面的代碼。return '<div class="container">'+        '<div class="row justify-content-center text-center my-3"></div>'+    '<div class="row justify-content-center text-center">'+        '<div class="col-md-4 mb-3">'+            '<img id="images" src="" class="img-fluid img-thumbnail"></a>'+        '</div>'+    '</div>'+'</div>';
查看完整描述

3 回答

?
函數式編程

TA貢獻1807條經驗 獲得超9個贊

您的代碼僅編輯一張圖片 src。你應該在你success的$.ajax


$.each(response, function(key, value){

    $("body").append($("<img>", { src: value.path } ));

})

這將為響應中的每個路徑添加一個圖像到正文。然后您可以開始根據您的要求修改它


查看完整回答
反對 回復 2021-12-03
?
Cats萌萌

TA貢獻1805條經驗 獲得超9個贊

最后,見下文


 $.ajax({

          url: 'api/catalogs.php?action=fetchimg&CatalogId='+d.CategoryId, 

          type: 'GET',


        dataType: "json",

        success: function(response) {                

          var images = "";

          $.each(response, function(key, value){

            images+='<div  class="col-md-4 mb-3">'+                                 

            '<img src="'+value.path+'" class="catalog-image img-responsive thumbnail"></a>'+

            '</div>';


          })

          $('#photos').html(images);


          },

在 HTML 上面的代碼插入到下面的 div 中:


<div class="container">

            <div id="photos" class="row justify-content-right text-right my-3"></div>

        <div  class="row justify-content-right text-right">


        </div>

</div>


查看完整回答
反對 回復 2021-12-03
?
蕪湖不蕪

TA貢獻1796條經驗 獲得超7個贊

因為您對所有元素 (#images) 使用相同的 ID。你需要讓它像 ('#images' + counter); 添加計數器一樣動態化。

同樣的事情需要在 HTML 中改變。


查看完整回答
反對 回復 2021-12-03
  • 3 回答
  • 0 關注
  • 192 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號