如何在JQuery中傳遞多個圖像源代碼

Iam使用Jquery動態分配圖像源代碼。

這是我的HTML代碼：
如何在JQuery中傳遞多個圖像源代碼

<img src="" id="picNameId" class="picNameId" name="picNameId" style="height: 100px; width: 100px; display: none;"> 
<input type="hidden" name="ticketFileAttahmentName" id="ticketFileAttahmentName" value=""> <br>

這是我的jQuery代碼：

var ticketFileAttahmentName=$("#ticketFileAttahmentName").val(); 
if(ticketFileAttahmentName!='') 
    { 

     var ticketFileAttahmentName1=ticketFileAttahmentName.split("|"); 
     for(i=0;i<ticketFileAttahmentName1.length;i++) 
      { 
       if(ticketFileAttahmentName1.length>1) 
       { 
        var file = ticketFileAttahmentName1[i]; 
        var src="/xxxxxx/files/"+file; 
        document.getElementById("picNameId").src = src; 
        $("#picNameId").src = src; 
        $("#picNameId").show(); 
       }else{ 
        var src="/xxxxxx/files/"+ticketFileAttahmentName; 
        document.getElementById("picNameId").src = src; 
        $(".picNameId").src = src; 
        $(".picNameId").show(); 
       } 
      } 
    }

蔭得到所有文件名中console.log

但IAM無法設置顯示多個文件相同的輸入。

對於單個文件iam能夠顯示。

來源

2017-10-14 karthik

你想完成什麼？此代碼將在每次迭代中替換img src。如果你想顯示多個圖像，你必須爲每個文件名添加一個img元素。 – henrikenblom

@HenrikEnblom你能用代碼解釋嗎 – karthik

好吧，等一下。 – henrikenblom

一個快速的方法來解決，這將是這樣的：

HTML：

<div id="picHolder></div> 
<input type="hidden" name="ticketFileAttahmentName" id="ticketFileAttahmentName" value=""> <br>

的Javascript/jQuery的：

var ticketFileAttahmentName=$("#ticketFileAttahmentName").val(); 
if(ticketFileAttahmentName!='') 
    { 

     var ticketFileAttahmentName1=ticketFileAttahmentName.split("|"); 
     $('#picHolder').empty(); 
     for(i=0;i<ticketFileAttahmentName1.length;i++) 
      { 
       var file = ticketFileAttahmentName1[i]; 
       var src="/xxxxxx/files/"+file; 
       var pic = $('<img class="picNameId" name="picNameId" style="height: 100px; width: 100px; display: none;">'); 
       pic.attr('src', src); 
       $('#picHolder').append(pic); 
      } 
    }

來源

2017-10-14 12:24:41 henrikenblom

謝謝你，這是工作 – karthik

你不能在一個圖像的多個圖像標籤。但是，您可以爲每張圖片創建新的img標籤。嘗試運行下面的代碼片段：

var ticketFileAttachmentName = document.getElementById(
 
    "ticketFileAttachmentName" 
 
).value; 
 

 
var ticketFileAttachmentName1 = ticketFileAttachmentName.split("|"); 
 

 
for (i = 0; i < ticketFileAttachmentName1.length; i++) { 
 
    var elem = document.createElement("img"); 
 
    elem.src = "https://placebear.com/100/" + ticketFileAttachmentName1[i]; 
 
    document.getElementById("pictures").appendChild(elem); 
 
}

img { 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div id="pictures"></div> 
 
<input type="hidden" name="ticketFileAttachmentName" id="ticketFileAttachmentName" value="100|101|102|103|104|105|106|107|108|109|110|111">

我刪除了底部條件語句，因爲我不知道它會在這裏做。

來源

2017-10-14 12:28:09

wront使用您必須更換
$(".picNameId").src = src;

到

$("#picNameId").attr("src",src)

看到詳情，請訪問 Changing the image source using jQuery

http://api.jquery.com/attr/

也許你真正的問題，嘗試基於CSS的src設置 https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/

例如那一個IMG和3個resurces。

<img src="images/space-needle.jpg" 
srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, 
images/space-needle-hd.jpg 600w">

來源

2017-10-14 12:38:37 Qh0stM4N

如何在JQuery中傳遞多個圖像源代碼

回答

相關問題