如何避免HTML中的重复代码？

假设我有一个类如下所示，显示我想要在我的网站上销售的可用物品。当我向我的网站添加新产品时，我应该如何避免一次又一次编写相同的代码。每次我添加一个新产品，只有它的图像和它指向的页面会改变。有什么办法可以有效管理这个吗？在此先感谢如何避免HTML中的重复代码？

<div class="sale"> 
     <div class="img-container"><a href="#"><img src="1.png">Product1</a></div> 
     <div class="img-container"><a href="#"><img src="2.png">Product2</a></div> 
     <div class="img-container"><a href="#"><img src="3.png">Product3</a></div> 
     <div class="img-container"><a href="#"><img src="4.png">Product4</a></div> 
</div>

来源

2015-10-05 deveshasha

有效地管理这是使用一种编程语言，而不是只用HTML –

能否请您解释一下你指的是哪门语言的方法？ – deveshasha

他指的只是使用html。这就是我的理解 –

有很多选项来实现DHTML。使用JavaScript一个基本的例子：

var details = [{ 
 
    'img': "http://simpleicon.com/wp-content/uploads/light-bulb-6.svg", 
 
    'lbl': "Product 1" 
 
}, { 
 
    'img': "http://images.clipartpanda.com/light-bulb-vector-png-9czEXKbbi.svg", 
 
    'lbl': "Product 2" 
 
}, { 
 
    'img': "http://images.clipartpanda.com/light-bulb-vector-png-light-bulb-7.svg", 
 
    'lbl': "Product 3" 
 
}]; 
 

 
var html = ""; 
 
for (var i = 0, l = details.length; l > i; i++) { 
 
    html += "<div class=\"img-container\">"; 
 
    html += "<a href=\"#\">"; 
 
    html += "<img src=\"" + details[i].img + "\">" + details[i].lbl + "</a>"; 
 
    html += "</div>"; 
 
} 
 

 
document.getElementsByClassName('sale')[0].innerHTML = html;

.sale { 
 
    border: 1px ridge grey; 
 
} 
 
.img-container { 
 
    border: 1px dashed grey; 
 
    margin: 3px; 
 
    display: inline-block; 
 
    padding: 3px; 
 
} 
 
.img-container img { 
 
    width: 100px; 
 
}

<div class="sale"> 
 
    <div class="img-container"> 
 
    <a href="#"> 
 
     <img src="1.png">Product1</a> 
 
    </div> 
 
    <div class="img-container"> 
 
    <a href="#"> 
 
     <img src="2.png">Product2</a> 
 
    </div> 
 
    <div class="img-container"> 
 
    <a href="#"> 
 
     <img src="3.png">Product3</a> 
 
    </div> 
 
    <div class="img-container"> 
 
    <a href="#"> 
 
     <img src="4.png">Product4</a> 
 
    </div> 
 
</div>

来源

2015-10-05 04:55:24 Arvind

基本上首先你要学会任何服务器端技术（例如，ASP，的NodeJS。PHP等）和数据库（例如，MySQL和MS SQL Server）的话，我相信你会得到你的答案。更重要的是还学习Javascript或其一个库jquery或最好是AngularJS。对于创建动态html，你必须命令Javascript至少至少

来源

2015-10-05 04:33:58

如何避免HTML中的重复代码？

回答

相关问题