如何在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中传递多个图像源代码

回答

相关问题