Подсчет классов затем укажите сумму, которую нужно изменить

У меня есть следующая функция 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');
  //     }
  // });

}

var $projImg = $('.proj-img').slice(0, amount);

— 18.06.2018 09:47

не могли бы вы поделиться своим путем к изображению, который вы устанавливаете в attr ()

— 18.06.2018 09:49

javascript jquery html

18.06.2018 09:43

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вы можете использовать массив, а затем 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';
  });
}

18.06.2018 09:47

Просто используйте 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, как указано в документации:

Because :lt() is a jQuery extension and not part of the CSS specification, queries using :lt() cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use $("your-pure-css-selector").slice(0, index) instead.

18.06.2018 09:48

Используйте селектор :lt()

   var amount = 5,change = '';
   $('.proj-img:lt('+amount+')').map(function(i,el){
        $(el).attr('src', 'src/img/' + change + 'Slide' + (i + 1) + '.png');
    });
    console.info($('.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">

18.06.2018 09:56

Другие вопросы по теме

Скрипт сортировки jquery - получить идентификатор элемента перетаскивания

Переменная не определена при попытке передать ее через onClick ()

Html таблица со сворачиваемыми строками

JQuery addeventListener. объект не поддерживает это свойство или метод

Почему моя кнопка дублируется, когда я ее добавляю?

Добавление столбца, являющегося результатом двух других столбцов в jqgrid?

Сериализовать данные формы и добавить их в jquery $ .post

Получить значения из HTML в jquery с помощью функции onkeyup с идентификатором элемента?

Рекурсивный обратный вызов AJAX по завершении

Повторить верхний и нижний колонтитулы с помощью printThis.js

Подсчет классов затем укажите сумму, которую нужно изменить

Ответы 3

Другие вопросы по теме

Похожие вопросы