如何避免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中的重複代碼？

回答

相關問題