Question

我通过jquery获取数据作为json并且在解析之后我得到一些图像并且对应于这些图像的一些文本。我的问题是我想在我的网页上显示这样的内容。 “一些形象”：相应的文字。

我该怎么办呢。

问题在于：

$.each(result.response.docs, function(i,item){
            src1=item.image;

            html+="<p><br>"+"<img src="+src1+  " />";
            html += "   UID_PK: ="+ item.UID_PK;
            html += "<br>Name: ="+ item.name;
            html += "<br>Description: ="+ item.description;
            html += "<br>Price: ="+ item.price;
            // ("#result").html(html);

            // alt1="No Image"
            //image+="<br>IMAGE: "+"<img src="+src1+ " alt="+alt1+ " />";
            //image+="<br>"+"<img src="+src1+ " />";
})
$("#result").html(html);

结果是a。我想问一下，我应该为图像和文本分别制作div。如果我这样做，那么我将不得不在循环中调用$("#result").html(html); ("#image").html(image);。如果我没有某些文字的图像，那么我想将该空格留空。

Answer 1

我认为你要做的是从javascript中显示你的JSON图像和文本！这是一个粗略解决方案：

var imgAndText = "<img src='"+jsonObject.imgSrc+"' />"; 
imgAndText += "<br/>";
imgAndText += "<p>"+jsonObject.imgText+"</p>";

document.write(imgAndText);

这构造了html并在页面上显示它！

修改

如果没有图片：

var imagAndText; if(jsonObject.imgSrc != null && jsonObject.imgSrc != "") { imgAndText = "<img src='"+jsonObject.imgSrc+"' />"; } else { imgAndText = "<img src='defaultImg.jpg' />"; } imgAndText += "<br/>"; imgAndText += "<p>"+jsonObject.imgText+"</p>"; document.write(imgAndText);

这应检查jsonObject中是否有imgSrc ...如果有，请使用它，否则使用可能是空白或任何你想要的预定义图像。

编辑2

从下面的@Anze澄清......

将else闭包更改为：

else { imgAndText = "<div class="image_placeholder"></div>"; }

在你的css中：

.image_placeholder { width:150px; /*your default width*/ height:150px; /*your default height*/ }

Answer 2

var imgAndText = '';

if(jsonObject.imgSrc != null || jsonObject.imgSrc != "") {
    imgAndText += "<img src='"+jsonObject.imgSrc+"' alt='"+jsonObject.imgText+"' />"; 
} else {
    imgAndText += "<div class='image_placeholder'></div>"; 
}

imgAndText += "<br/>";
imgAndText += "<p>"+jsonObject.imgText+"</p>";

document.write(imgAndText);

如何显示图像及其相应的文本

2 个答案: