使用jQuery

Question

我有一个2行3列的网格，并且我希望每张卡中都有不同的图像，根据用户是否从不同的菜单输入图像，图像也应该有所不同。

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

$("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>

Answer 2

您可以为每个图像设置相应来源所需的- (void)viewDidLoad { UISearchController *searchController = [[UISearchController alloc] initWithSearchResultsController:nil]; if (@available(iOS 11.0, *)) { self.navigationItem.searchController = searchController; } else { self.navigationItem.titleView = searchController.searchBar; } } ，并使用jQuery做：

id