jquery - 使用 jQuery 更改多个图像 src

Question

我有一个 2 行 3 列的网格，我希望在每张卡片中都有不同的图像，并且图像也应该不同，具体取决于用户是否从不同的菜单输入。

我尝试使用 for 循环来选择不同的图像，但只选择第一个或最后一个图像。

$("img").attr('src', function() {
  for (var i = 0; i < this.length; i++) {
    return "media/" + currentId + i + ".jpg";
    i++;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- This is 1 card out of 6 -->

<div class="card">
  <div class="card-image waves-effect waves-block waves-light">
    <img class="activator">
  </div>
  <div class="card-content">
    <span class="card-title activator"></span>
  </div>
  <div class="card-action">
    <span class="link">Lorem impsum</span>
  </div>
  <div class="card-reveal">
    <span class="card-title"><i class="material-icons right">close</i></span>
    <p>Lorem impsum</p>
  </div>
</div>

正如我在文章前面所描述的，输出应该是 6 个不同的图像，而且只是 6 个相同的图像。

Answer 1

通过向 attr() 提供函数，您可以在每个 img 元素中创建一个隐式循环。因此，您不需要该函数中的 for 循环。然后，您可以通过接收函数的第一个参数并将其用作图像文件的名称来获取循环中当前元素的索引。试试这个:

$("img").attr('src', function(i) {
  return "media/" + i + ".jpg";
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- This is 1 card out of 6 -->

<div class="card">
  <div class="card-image waves-effect waves-block waves-light">
    <img class="activator">
  </div>
  <div class="card-action">
    <span class="link">Lorem impsum</span>
  </div>
</div>
<div class="card">
  <div class="card-image waves-effect waves-block waves-light">
    <img class="activator">
  </div>
  <div class="card-action">
    <span class="link">Lorem impsum</span>
  </div>
</div>