使用Javascript腳本中DIV中的動態ImgSrcURL

我正在嘗試在 img src 中插入一個動態 url。

下面是我的 HTML 和腳本代碼。OnClick 選項卡，我正在呼叫 GET HTTP 方法，該方法以影像 url 進行回應。我想將此影像 url 與 img src 欄位一起使用。

HTML代碼

        ....
        <li>
          <a href="#" class="tm-tab-link" data-id="hot" onclick="isValid();" id="login">Reviews</a>
        </li>
        ...
        <div id="hot" class="tm-tab-content">
          <div class="tm-list">
              <div class="features_items" id="name"></div>
          </div>
        </div>
        ....

腳本 -

$("#login").on("click", function isValid() {
    
    $.ajax({
        url: "https://xyz.foo.net/super",
        type: 'GET',
        success: function(data) {
                
            var name = "";
            for(var i=0;i<=data.length-1;i  ){
            name  = '<div >'  
      
                // how to add the image url below DYNAMICALLY? 
                // how to insert data[i].img ?

              '<img src="??????????" id=image1 alt="使用 Javascript 腳本中 DIV 中的動態 Img Src URL" >'    
                        '<div >'  
                            '<h3 >'   data[i].name   '</h3>'  
                            '<p >'   data[i].review   '</p>'         
                        '</div> '  
                     '</div>' 
            }
            
            $("#name").html("");
            $("#name").append(name);
        },
        error: function(e) {
            alert("Refresh Page");
        }
    });

});

示例 JSON 回應 -

[
 {
  "name":"John",
  "review":"awesome product",
  "img":"https://img.com/cats"
  },
  {
  "name":"Shawn",
  "review":"good product",
  "img":"https://img.com/dogs"
  }
]

uj5u.com熱心網友回復：

使用反引號 (`) 代替單引號'或雙引號"。反引號支持字串插值${...}和多行：

name  = `<div class="tm-list-item">
              <img src="${data[i].img}" id="image1" alt="Image" class="tm-list-item-img"/>
              <div class="tm-black-bg tm-list-item-text">
                    <h3 class="tm-list-item-name">${data[i].name}</h3>
                    <p class="tm-list-item-description">${data[i].review}</p>
               </div> 
        </div>`;

uj5u.com熱心網友回復：

• 我只是用 jsonplaceholder 替換 url 來測驗

• 此外， id 必須是唯一的，與您的問題無關。

  $.ajax({ url: "https://jsonplaceholder.typicode.com/photos", type: 'GET', 成功: function(data) {

        console.log(data);
  
        for(var i=0;i<=data.length-1;i  ){
        name  = '<div >'  
  
  
          '<img src="' data[i].url '"   id="image'   i   '" alt="使用 Javascript 腳本中 DIV 中的動態 Img Src URL" >'    
                    '<div >'  
                        '<h3 >'   data[i].name   '</h3>'  
                        '<p >'   data[i].review   '</p>'         
                    '</div> '  
                 '</div>' 
        }
  
        $("#name").html("");
        $("#name").append(name);
    },
    error: function(e) {
        alert("Refresh Page");
    }
  

  });

uj5u.com熱心網友回復：

模板字串中的變數插值可以通過以下方式實作：

       '<img src="${data[i].img}" id=image1 alt="Image" class="tm-list-item-img">'    
                    '<div class="tm-black-bg tm-list-item-text">'  
                        '<h3 class="tm-list-item-name">'   data[i].name   
                        '</h3>'  
                        '<p class="tm-list-item-description">'   data[i].review 
                           '</p>'         
                    '</div> '  
                 '</div>' 

uj5u.com熱心網友回復：

$("#login").on("click", function isValid() {
    
    $.ajax({
        url: "https://xyz.foo.net/super",
        type: 'GET',
        success: function(data) {
                
            var name = "";
            for(var i=0;i<=data.length-1;i  ){
            name  = '<div >'  
      
                // how to add the image url below DYNAMICALLY? 
                // how to insert data[i].img ?

              '<img src=`${data[i].img}` id=image1 alt="使用 Javascript 腳本中 DIV 中的動態 Img Src URL" >'    
                        '<div >'  
                            '<h3 >'   data[i].name   '</h3>'  
                            '<p >'   data[i].review   '</p>'         
                        '</div> '  
                     '</div>' 
            }
            
            $("#name").html("");
            $("#name").append(name);
        },
        error: function(e) {
            alert("Refresh Page");
        }
    });

});

或者

$("#login").on("click", function isValid() {

$.ajax({
    url: "https://xyz.foo.net/super",
    type: 'GET',
    success: function(data) {
            
        var name = "";
        for(var i=0;i<=data.length-1;i  ){
        name  = '<div >'  
  
            // how to add the image url below DYNAMICALLY? 
            // how to insert data[i].img ?

          '<img src="${data[i].img}" id=image1 alt="使用 Javascript 腳本中 DIV 中的動態 Img Src URL" >'    
                    '<div >'  
                        '<h3 >'   data[i].name   '</h3>'  
                        '<p >'   data[i].review   '</p>'         
                    '</div> '  
                 '</div>' 
        }
        
        $("#name").html("");
        $("#name").append(name);
    },
    error: function(e) {
        alert("Refresh Page");
    }
});

});

標籤：javascript html 阿贾克斯

上一篇：如何在aspnetcorewebAPI上正確地將串列轉換為IQueryable

下一篇：如何使用js獲取樣式值