Изменение текста элемента из цикла
Я хочу изменить текст или удалить одну букву из списка элементов, поступающих из базы данных, я пробовал разные простые методы jQuery, но ни один из них не работает.
Я пробовал jQuery .find(), .children(), .text(), .html().
if (requiredVisits == 1){
$(`.upcoming-item${i + 1} `).find('.how-earned').text('EARNED FROM 1 VISIT')
}
$('#upcoming-rewards').append(`
<item class = "upcoming-reward-item upcoming-item${i + 1} available">
<span>
<p style = "line-height: 16px" class = "reward-item reward${i + 1}">${reward}</p>
<span id = "how-earned" class = "how-earned">EARNED FROM ${requiredVisits} VISITS</span>
</span>
</item>
`)
Я также попытался просто записать в console.info написанный текст, и я получил «неопределенный» или просто пустой результат. Так что, возможно, я не правильно езжу на пролете, который хотел. Любая помощь будет здорово! :)
Ожидаемый результат будет "ЗАРАБОТАН ОТ 1 ПОСЕЩЕНИЯ", а не "ЗАРАБОТАН ОТ 1 ПОСЕЩЕНИЯ".
Хотя ваш вопрос немного сбивает с толку. У вас есть добавление после к первому условному выражению. Если вы добавляете после условного, его не будет для условного. Что также вызывает вопрос, почему вы генерируете неправильный html в первую очередь, который вы должны исправить.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Одним из вариантов было бы изначально использовать соответствующую формулировку вместо того, чтобы пытаться ее обновить...
var visitsText = (requiredVisits === 1) ? 'VISIT' : 'VISITS';
$('#upcoming-rewards').append(`
<item class = "upcoming-reward-item upcoming-item${i + 1} available">
<span>
<p style = "line-height: 16px" class = "reward-item reward${i + 1}">${reward}</p>
<span id = "how-earned" class = "how-earned">EARNED FROM ${requiredVisits} ${visitsText}</span>
</span>
</item>
`)
Кажется, вы пытаетесь изменить текст элемента перед его созданием. Попробуйте двигаться
if (requiredVisits == 1){
$(`.upcoming-item${i + 1} `).find('.how-earned').text('EARNED FROM 1 VISIT')
}
ПОСЛЕ действия .append().
Исправьте генерацию html. Не пытайтесь исправить это постфактум, если это возможно.
$('#upcoming-rewards').append(`
<item class = "upcoming-reward-item upcoming-item${i + 1} available">
<span>
<p style = "line-height: 16px" class = "reward-item reward${i + 1}">${reward}</p>
<span id = "how-earned" class = "how-earned">EARNED FROM ${requiredVisits} VISIT${requiredVisits > 1 ? 'S' : ''}</span>
</span>
</item>
`);
Я не знал, что вы можете сделать это, но это сработало как шарм! Спасибо!!
${expression} может быть что угодно. Ожидается, что он вернет окончательное значение в конце
FWIW, я обычно делаю !== 1 вместо > 1, потому что часто мне приходится обрабатывать отображение для 0 (нулевых) экземпляров, которые обычно имеют форму множественного числа.
console.info($(`.upcoming-item${i + 1}`).find('.how-earned').length)и расскажите нам, что там написано. Любая хорошая отладка начинается с журналов или инструкций отладчика.