Как мне перебрать встроенную переменную, используя pug

Я пытаюсь перебрать массив и каждый раз добавлять 1 к встроенной переменной мопса. Пока это то, что я получил.

ul(class="benchcards")
            - var i = -1
            each card in cards
                -var L = i + 1
                li
                    a.btn(href="/addmonster" + L)
                        div=card.name
                        div= "Attack: "+card.attack
                        div= "HP: "+card.hp
                        div= "Attribute: "+card.attribute
                        div= "Energy: "+card.energy

Когда я запускаю страницу, «L» всегда = 0. Я хочу, чтобы она каждый раз добавляла 1. Вопрос действительно сводится к тому, что я делаю неправильно?

Вы никогда не увеличиваете i.

Barmar 16.05.2022 22:50

Бармар прав. Было бы лучше использовать -var i = i + 1, а не L= i + 1.

Donald Koscheka 16.05.2022 23:01

@DonaldKoscheka Я реализовал ваше предложение, и оно возвращается как «addmonsterNaN».

John Ward 16.05.2022 23:11
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
3
44
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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

Как сказано в комментариях, вы не увеличиваете i, вы можете решить свою проблему следующим образом:

ul.benchcards
  - var i = -1;
  each card in cards
    li
      a.btn(href='/addmonster' + i++)
        div= card.name
        div= 'Attack: ' + card.attack
        div= 'HP: ' + card.hp
        div= 'Attribute: ' + card.attribute
        div= 'Energy: ' + card.energy

Вот улучшенный код, основанный на вашем

ul.benchcards
  each card, i in cards
    li
      a.btn(href=`/addmonster${i}`)
        div #{card.name}
        div Attack: #{card.attack}
        div HP: #{card.hp}
        div Attribute: #{card.attribute}
        div Energy: #{card.energy}

Является ли стандартной практикой редактирование ответа для вставки кода из другого ответа?

Sean 17.05.2022 20:47

Привет, Шон, когда я ответил на это, для меня было уже поздно, я устал, просто хотел быстро исправить OP, я не особо думал об ответе, зная, что я собираюсь улучшить его всякий раз, когда у меня будет шанс. Сегодня, когда я собирался улучшить свой ответ, я не ожидал получить еще 2 ответа на этот вопрос, но, к вашему сведению, я работал с мопсом последние 4/5 лет до марта, поэтому я знаю об индексе в каждый цикл также я ненавижу конкатенацию, предпочитая гораздо больше строковых шаблонов/интерполяции. В конце концов, мои улучшения совпали с вашим ответом, извините, если это показалось копипастом.

dippas 17.05.2022 21:04

Используя строковый шаблон, это сработало на моей странице мопса (также проверьте синтаксис для тега div):

 a.btn(href=`#+${(i++).toString}`) 
 div #{card.name}
 div Attack: #{card.attack}

Отступы отсутствуют в теге div. Я бы также сделал имя привязкой, а не всю запись, но это вопрос стиля.

Donald Koscheka 17.05.2022 14:46

Лучше использовать индекс, встроенный в итератор each в Pug. Таким образом, не нужно объявлять или увеличивать переменную.

ul.benchcards
  each card, i in cards
    li
      a.btn(href=`/addmonster${i}`)
        div #{card.name}
        div Attack: #{card.attack}
        div HP: #{card.hp}
        div Attribute: #{card.attribute}
        div Energy: #{card.energy}

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