动态添加数组内容作为新元素 - jQuery

编辑：问题解决！我在加载之前修改了页面，所以脚本实际上没有做任何事情。我现在修好了它，它工作。感谢您的帮助，我将不得不将这一个粉笔写成jQuery的新手，这很奇怪。动态添加数组内容作为新元素 - jQuery

长篇故事我试图制作一个动态获取文章标题，缩略图图片，描述和链接的网页，并在页面上创建一个格式良好的列表。我试图在jQuery和HTML5中实现这一点。

以下是我将用于动态填充页面的示例数据。现在格式化并不重要，因为我可以在后期完成后进行格式化。

<script> 
var newsTitles = ["If It Ain&#39;t Broke, Fix It Anyways"]; 
var newsPics = ["images/thumbnail_small.png"]; 
var newsDescs = ["August 14th 2015<br/><b>If It Ain't Broke</b><br/>Author: Gill Yurick<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sometimes, a solution isn't the only one. So how do we justify changes to systems that don't need to be fixed or changed? I explore various systems from other successful card games and how their approaches to issues (be they successes or failures in the eyes of the deisgners) can help us create EC."]; 
var newsLinks = ["it_aint_broke-gill_popson.html"]; 
var newsIndex = 0; 
var newsMax = 1;

我试图使用上面的数组内容动态地填充元素的代码段。

<td style="height:500px;width:480px;background-color:#FFF7D7;padding:20px" colspan=2 id="article"> 
    <h1>Articles</h1> 
    <!-- the column for each news peice add an element with the thumbnail, the title and teh desc --> 
    <script> 
     for(i = 0; i < newsMax; i++) { 
      $("#articleList").append("<h3 href=&quot;" newsLinks[i] + "&quot;>" + newsTitles[i] + "</h3>", "<img src=&quot;"newsPics[i] + "&quot;>","<p>" + newsDesc[i] + "</p>",); $("div").append("hello"); 
     } 
    </script> 
    <div id="articleList"> 
     HELLO 
    </div> 
</td>

这里是它结束了看起来像，如果需要，我可以发布更多的信息，因为我知道这可能不是足够清晰，充分说明我的问题，但我无法确定。先谢谢你。

enter image description here

来源

2016-01-12 Gwen Yurick

控制台中的任何错误？您可以使用'F12'访问控制台。 –

在字符串连接中缺少属性和“+”的引号。无法用'"e;'替换属性引用 – charlietfl

@ParthTrivedi否，这是无效的使用'"e;' – charlietfl

下面的字符串是无效的HTML和缺少+

"<h3 href=&quot;" newsLinks[i] + "&quot;>"

您需要使用合适的报价为HTML属性，并不&quote;

尝试

"<h3 href='" + newsLinks[i] + "'>"

"<h3 href=\"" + newsLinks[i] + "\">" // `\` used to escape same type quote

个人而言，我更喜欢打开/关闭HTML字符串使用单引号，但无论是将工作，你应该得到的开发工具控制台抛出一个语法错误，这会帮助你找到问题

注谓

来源

2016-01-12 07:31:01 charlietfl

谢谢，我改变了你建议的东西，但它不工作，必须自己做一些调试我没有意识到开发工具控制台，这是我第一次尝试构建一个不是纯HTML和CSS的网页，所以我很不了解这些东西。找到一个很好的描述不同的方式来添加报价，给出了为什么要使用每个报价的原因。我现在是一个纯文本编辑器，因为它是我所有的，所以记事本+ +无论如何，所以我错过了拼写对另一件事的错误感觉像是一个傻瓜。 –

试试这个

for(i = 0; i < newsMax; i++) { 
    $("#articleList").append("<h3 href=&quot;"+ newsLinks[i] + "&quot;>" + newsTitles[i] + "</h3>, <img src=&quot;"+newsPics[i] + "&quot;>, <p>" + newsDescs[i] + "</p>"); $("div").append("hello"); 
}

Concatation问题+错字的newsDescs

来源

2016-01-12 07:32:10

'尝试这个'并不能解释发生了什么变化或为什么它应该工作 – charlietfl

这是串联问题。而newsDesc并未将其定义为newsDescs。你在变量的末尾忘了''。 –

for(i = 0; i < newsMax; i++) { 
     $("#articleList").append("<h3 href='" + newsLinks[i] + "'>" + newsTitles[i] + "</h3>"); 
     $("#articleList").append("<img src='" + newsPics[i] + "'>","<p>" + newsDesc[i] + "</p>"); 

    }

来源

2016-01-12 11:47:54 Aswathy

动态添加数组内容作为新元素 - jQuery

回答

相关问题