2016-12-26 64 views
0

我試圖在單擊按鈕時加載多個圖像。在Jquery中動態獲取圖像

這是我的腳本

$(document).ready(function(){ 
    $("button").click(function(){ 
      $('#img').html('<img src="img ' + $(this).val() + '.jpg" width="200px">'); 
    }); 
}); 

這裏如何使用for循環,從文件夾img

得到所有圖片

的html代碼:

<body> 
<div id="img"></div> 
<button>Get External Content</button> 
</body> 
+0

$(本).VAL()返回按鈕的點擊價值。你想要這個或像圖像名稱一樣的其他值嗎? – Nitesh

+0

根據您將加載多個圖像? – ScanQR

+1

您必須使用AJAX才能從文件夾中獲取所有圖像。 –

回答

1

不知道在您的 「IMG文件夾」是,所以我定義了一些變量讓你更新它們的值。

無論如何,代碼如下:

// update these 
var imagesFolder = "myFolder"; 
var imagesSources = ["image1", "image2", "image3", "image4"]; 

$("button").click(function() { 
    for (var i = 0; i < imagesSources.length; i++) { 
     $('#img').append('<img src="' + imagesFolder + '/' + imagesSources[i] + '.jpg">'); 
    } 
}); 
+0

是否有可能直接從文件夾中獲取圖像而不存儲在數組中 – moksha

+0

嗯,是的,但是您需要從該文件夾中讀取以發現哪些文件存在。沒有用戶輸入,JavaScript無法做到這一點。如果您的文件位於服務器上,則可以編寫一種方法從文件夾中讀取文件名,並將其作爲名稱數組返回到前​​端,然後顯示圖像。 – rabelloo