是否可以在＆＃34; for循环中使用2个变量＆＃34;？

Question

例如：

var totalImages = 45;

function GalleryGrid(limit) {
    for (var i = totalImages; i > totalImages - limit; i--) {
        $('.grid').append('<div class="entry"><img src="photo-' + i + '.jpg"><img src="symbol-' + n + '.svg"></div>');
    }
}

GalleryGrid(totalImages);

在这个例子中，我们有2个变量＆＃34; i＆＃34;和＆＃34; n＆＃34;。

var i 需要给我1到45的数字（已解决，已经工作）。 var n 需要给我两种类型的字母，＆＃34; a＆＃34;或＆＃34; b＆＃34; （随机）。

关于如何制作＆＃34; n＆＃34;是随机的＆＃34; a＆＃34;或＆＃34; b＆＃34;？

// Desired output:
<div class="entry"><img src="photo-1.jpg"><img src="symbol-a.svg"></div>
<div class="entry"><img src="photo-2.jpg"><img src="symbol-b.svg"></div>
<div class="entry"><img src="photo-3.jpg"><img src="symbol-b.svg"></div>
<div class="entry"><img src="photo-4.jpg"><img src="symbol-a.svg"></div>

Answer 1

试试这个：

function GalleryGrid(limit) {
    for (var i = totalImages; i > totalImages - limit; i--) {
        var n = String.fromCharCode(97 + Math.floor(Math.random() * 2));
        $('.grid').append('<div class="entry"><img src="photo-' + i + '.jpg"><img src="symbol-' + n + '.svg"></div>');
    }
}

Answer 2

使用Math#random选项数组：

＆＃13;

＆＃13;

var totalImages = 45;
var $grid = $('.grid');

function GalleryGrid(limit) {
  var options = ['a', 'b'];
  var n;
  for (var i = totalImages; i > totalImages - limit; i--) {
    n = options[Math.floor(Math.random() * 2)];
    $grid.append('<div class="entry"><img src="photo-' + i + '.jpg"><img src="symbol-' + n + '.svg"></div>');
  }
}

GalleryGrid(totalImages);

＆＃13;

img {
  width: 20px;
  height: 20px;
}

img[src$="a.svg"] {
  background: red;
}

img[src$="b.svg"] {
  background: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid"></div>

＆＃13;

＆＃13;

＆＃13;