0

问题

我是新手...

我有一些基本的 HTML，其中包含一个圆形“div”，其中包含一个子圆形“div”，它有一个使用 CSS `background-image` 的图像，一个 `h1` 和 `p` 标签使用`显示：悬停选择器。

这段代码重复了两次，并被包裹在一个 `section` 标记中，如下所示：

<section class="col-4">

        <div class="img-wrapper">           
            <a href="#">                
                <div class="outta-circle">
                    <div class="text">
                        <h1 id="news-title-1"></h1>
                        <p>Read more...</p>
                    </div>  
                    <div id="circle1"></div>
                </div>
            </a>
        </div>

        <div class="img-wrapper">
            <a href="#">
                <div class="outta-circle">
                    <div class="text">
                        <h1 id="news-title-2"></h1>
                        <p>Read more...</p>
                    </div>      
                    <div id="circle2"></div>
                </div>
            </a>
        </div>

</section>

这是我第一次编写 Javascript，但我使用了一些基本代码来处理包含新闻文章内容的数组（我还没有研究过使用 MySQL 之类的东西），以及一些代码来处理更改`background-image` 属性的 `url()` 属性，这似乎有效：

var articleArray = [

{img: "img/img-01.jpg", title: "Article Name", content: "This is the content coming from javascript", date: "27/6/2013"},

{img: "img/img-02.jpg", title: "Article Two Name", content: "This is also content coming from javascript", date: "28/6/2013"}

];

S('circle1').backgroundImage = 'url('+articleArray[articleArray.length - 2]["img"]+')';
S('circle2').backgroundImage = 'url('+articleArray[articleArray.length - 1]["img"]+')';

var newsTitle = articleArray[articleArray.length - 2]["title"];
var newsTitle2 = articleArray[articleArray.length - 1]["title"];

O('news-title-1').innerHTML = newsTitle;
O('news-title-2').innerHTML = newsTitle2;

我有一些 PHP 经验，通常我会编写一个函数来解析（这是正确的词，是吗？）使用 PHP 的 HTML 使用“foreach”循环消除了对重复 ID 标记的需要，如 `circle1` 和 `circle2 `。我已经走上了 Javascript 路线，因为我不知道如何动态更改 `background-image` 属性的 `url()` 属性，最后看看一些 Javascript 真是太好了 :)

我想要什么

关于最佳实践的一些建议，以便正确显示上述代码，因此我可以遍历包含 HTML 的数组，将内容放置在需要的位置

请记住我的知识是有限的，我已经很久没有这样做了，所以如果有任何帮助以通俗的方式表达出来，将不胜感激......非常感谢！！！

4

0 回答 0