时间戳

首页 > 解决方案 > 然后计数类指定要更改的数量

javascript - 然后计数类指定要更改的数量

问题描述

我有以下 JavaScript 函数，在其中我divs用 a计算总数classname，但并非所有都必须更改，这是用金额参数指定的。所以有 4 个类，所以每个类都计算类，然后 for 循环根据数量参数更改它们。

但这似乎不起作用，也请参阅注释掉的版本-

function changeImages(change, amount) {
  var $projImg = $('.proj-img');

  $.each($projImg, function(i) {
    $(this).attr('src', 'src/img/' + change + 'Slide' + (i + 1) + '.png');
  });

  // $.each($projImg, function (j) {
  //     for(var i = 0; i < amount; i++){
  //         $(this).attr('src', 'src/img/' + change + 'Slide' + (i) + '.png');
  //     }
  // });

}

标签： javascriptjqueryhtml

解决方案

只需使用 jQuery 的.slice()：

function changeImages(amount) {
    const $matches = $('.foo').slice(0, amount);

    $matches.addClass('bar');
}

changeImages(10);
.foo {
  border-bottom: 8px solid red;
}

.bar {
  border-color: cyan;
}

.foo:hover {
  border-color: black;
}
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>

<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>

<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>

<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>

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

您的 JS 代码将如下所示：

function changeImages(change, amount) {
  $('img').slice(0, amount).each((i, el) => {
    el.setAttribute('src', `https://place-hold.it/200x200&text=${ change }-${ i + 1 }`);
  });
}

changeImages('UPDATED', 3);
body {
  margin: 0;
}

img {
  float: left;
  max-width: 20vw;
}
<img src="https://place-hold.it/200x200&text=DEFAULT" />
<img src="https://place-hold.it/200x200&text=DEFAULT" />
<img src="https://place-hold.it/200x200&text=DEFAULT" />
<img src="https://place-hold.it/200x200&text=DEFAULT" />
<img src="https://place-hold.it/200x200&text=DEFAULT" />

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

此外，关于:lt()，请记住这不是 CSS 规范的一部分，如文档中所述：

因为:lt()是 jQuery 扩展而不是 CSS 规范的一部分，所以使用的查询:lt()不能利用原生 DOMquerySelectorAll()方法提供的性能提升。为了在现代浏览器中获得更好的性能，请$("your-pure-css-selector").slice(0, index)改用。

推荐阅读