在給定預定義變量的情況下，如何在jQuery中計算出一定數量

Question

我在一個函數中定義了一個變量，該變量將“數據”屬性提供的值存儲在標簽中。

即<img data-value="##"/> （##表示1到XX之間的數字）。

我已經存儲了這樣的變量：

$dataValue = $('img').attr('data-value');

我現在想使用$dataValue變量將所有<img>標記附加所有值。 例如，給定data-value為4，則輸出為：

<img src="http://placehold.it/50x50?text=1" />
<img src="http://placehold.it/50x50?text=2" />
<img src="http://placehold.it/50x50?text=3" />
<img src="http://placehold.it/50x50?text=4" />

到目前為止，我已經完成了以下操作，但是我無法找到一種方法來遞增數字“ 4”（或數據值是任何數字），並以遞增的順序吐出4個圖像標簽，如上所示。

var img = '<img src="http://placehold.it/50x50?text=' + $dataValue + '" />';

// <img src="http://placehold.it/50x50?text=4" />

我如何實現上面的輸出，以便所有從1開始的數字都記錄到數據值數字中。 我想使用這些標簽，然后將這些標簽附加到另一個地方。

Answer 1

您只需要一個基本循環

var dataValue = $('img').data('value');
for (i = 1; i <= dataValue; i++) {
    $('.container').append('<img src="http://placehold.it/50x50?text=' + dataValue + '" />')
} 

$('.container')是要附加圖像的元素的名稱。

另外，我建議您使用.data()而不是.attr()來獲取dataValue，因為.data（）就是為此而創建的。

也請記住， .append()是可以改變的其他方法，例如.before() .after() .prepend()等，我建議你在你需要的方法讀了。