Question

我有以下JavaScript函数，其中我使用divs计算总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');
  //     }
  // });

}

Answer 1

您可以使用数组，然后使用slice它，使其包含的元素数不超过amount，不需要jQuery：

function changeImages(change, amount) {
  const projImgs = [...document.querySelectorAll('.proj-img')]
    .slice(0, amount);
  projImgs.forEach((img, i) => {
    img.src = 'src/img/' + change + 'Slide' + (i + 1) + '.png';
  });
}

Answer 2

只需使用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()的查询无法利用本机DOM querySelectorAll()方法提供的性能提升。为了在现代浏览器中获得更好的性能，请改用$("your-pure-css-selector").slice(0, index)。

Answer 3

使用:lt()选择器

   var amount = 5,change = '';
   $('.proj-img:lt('+amount+')').map(function(i,el){
        $(el).attr('src', 'src/img/' + change + 'Slide' + (i + 1) + '.png');
    });
    console.log($('.proj-img'))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="" alt="" class="proj-img">
    <img src="" alt="" class="proj-img">
    <img src="" alt="" class="proj-img">
    <img src="" alt="" class="proj-img">
    <img src="" alt="" class="proj-img">
    <img src="" alt="" class="proj-img">
    <img src="" alt="" class="proj-img">
    <img src="" alt="" class="proj-img">
    <img src="" alt="" class="proj-img">
    <img src="" alt="" class="proj-img">
    <img src="" alt="" class="proj-img">
    <img src="" alt="" class="proj-img">
    <img src="" alt="" class="proj-img">
    <img src="" alt="" class="proj-img">
    <img src="" alt="" class="proj-img">
    <img src="" alt="" class="proj-img">
    <img src="" alt="" class="proj-img">
    <img src="" alt="" class="proj-img">
    <img src="" alt="" class="proj-img">
    <img src="" alt="" class="proj-img">

计数类然后指定要更改的金额

3 个答案: