-2

我是JavaScript的新手，我需要使用它與bootstrap爲我自己的網頁。我的問題是現在我怎麼能做一個循環，以便圖片名稱（存儲爲一個數組）可以出現在HTML代碼的正確位置，所以我不必複製每個圖片的代碼塊。Javascript中的html標籤，以避免重複

例如：

<div class="row"> 
    <div class="col-md-3 col-xs-6 portfolio-item"> 
     <img class="img-responsive" src="01.jpg"> 
    </div> 
</div> 


<div class="row"> 
    <div class="col-md-3 col-xs-6 portfolio-item"> 
     <img class="img-responsive" src="01.jpg"> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-md-3 col-xs-6 portfolio-item"> 
     <img class="img-responsive" src="02.jpg"> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-md-3 col-xs-6 portfolio-item"> 
     <img class="img-responsive" src="03.jpg"> 
    </div> 
</div>

我們可以看到這裏唯一的不同文本的src.How我可以存儲在陣列中的名稱（路徑），使一個循環，改變src屬性？謝謝！

來源

2016-01-29 Teo

JavaScript的模板：https://en.wikipedia.org/wiki/JavaScript_templating和https：//開頭的插件。 jquery.com/tag/templates/ – swatkins

您可以使用存儲在HTML中的模板，然後使用圖像源陣列生成實際元素。像John Resig's micro-templates可以實現這一點。

<script type="text/template" id="img-tmpl"> 
    <div class="row"> 
     <div class="col-md-3 col-xs-6 portfolio-item> 
      <img class="img-responsive" src="<%= src %>"> 
     </div> 
    </div> 
</script>

來源

2016-01-29 17:48:15 Reda

試試這個演示：http://jsbin.com/pinoxeqapi/1/edit?html,output

我想這就是你要找的內容。

CODE

$(function() { 
    var images = ["01.jpg", "01.jpg", "02.jpg", "03.jpg"]; 

    $.each(images, function (index, element) { 
    var imgContainer = "<div class='row'><div class='col-md-3 col-xs-6 portfolio-item><img class='img-responsive' src='" + element + "'></div></div>"; 
     $("body").append(imgContainer); 
    }); 
});

來源

2016-01-29 17:51:52 mhodges

郵政編碼回答自己。只需發佈一個鏈接***不是一個答案。答案應該是自包含的，鏈接應該只用於支持答案中的內容。總之......這不過是一個評論 – charlietfl

完成。感謝您的反饋 – mhodges

我該如何調用函數？我只是使用將它粘貼到我的HTML代碼中，但它似乎沒有工作（圖片未顯示）。 – Teo

首先包括JQuery（如果不是）

<script> 
var srcArray = ['01.jpg', '02.jpg', '03.jpg', '04.jpg']; 

$(document).ready(function() { 
    for (var i = 0; i < srcArray.length; i++) { 
     $('div.row img.img-responsive').eq(i).attr("src", srcArray[i]); 
    } 

}); 
</script>

來源

2016-01-29 17:55:03 Confused

我會建議使用一些其他的答案中描述的模板框架之一。如果你有興趣，看看如何在純JS實現這一點：

var temp = document.querySelector('#portfolio-item-template'); 
 
['01.jpg', '02.jpg', '03.jpg', '04.jpg'].forEach(function(src) { 
 
    temp.content.querySelector(".img-responsive").src = src; 
 
    var newImg = document.importNode(temp.content, true); 
 
    document.querySelector('#insertion-point').appendChild(newImg); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<template id="portfolio-item-template"> 
 
    <div class="row"> 
 
    <div class="col-md-3 col-xs-6 portfolio-item"> 
 
     <img class="img-responsive"> 
 
    </div> 
 
    </div> 
 
</template> 
 

 
<div id="insertion-point"> 
 
</div>

來源

2016-01-29 17:58:26

Javascript中的html標籤，以避免重複

回答

CODE

相關問題