Все еще действительно новое в Javascript / jQuery.Вот сценарий ... Я использую Velocity Template Engine для генерации моей HTML-страницы.У меня есть пользовательские флажки на странице, которые имеют форму значков Font Awesome.Моя цель состоит в том, чтобы загрузить страницу с цветными или неокрашенными значками в зависимости от значения в флажке (которое генерируется из моей базы данных и вводится с помощью скорости).
Вот Javascript:
$(document).ready(function(){
var checkedValue = $('.love').val();
console.log("Checked value is: " + checkedValue);
if (checkedValue == 'Y') {
$(".heart").addClass("has-text-danger");
console.log("if Checked value is: " + checkedValue);
} else if (checkedValue == 'love') {
$(".heart").addClass("has-text-danger");
console.log("else if Checked value is: " + checkedValue);
} else {
$(".heart").removeClass("has-text-danger");
console.log("else Checked value is: " + checkedValue);
}
});
Вот фрагмент HTML
<div class="columns is-multiline">
<!-- Here are all of the Amiibo -->
#foreach( $amiibo in $amiibos )
<div class="column is-one-fifth">
<div class="amiibo-id is-hidden" id="amiibo">
</div>
<article class="message is-large is-danger">
<div class="message-header" id="$amiibo.Name">
<p></p>
<p>$amiibo.Name</p>
<p></p>
</div>
<center> <!-- Amiibo -->
<figure class="image has-text-light">
<img class="amiibo-image" src="$amiibo.ImageURL" id="inactive-$amiibo.AmiiboID">
<!-- Content Over Amiibo -->
<figcaption class="overlay is-overlay is-invisible" id="active-$amiibo.AmiiboID">
<!-- Background -->
<img class="background is-overlay" alt="Mario" src="https://storage.googleapis.com/amiibo/black.png">
<div style="height:16px;font-size:16px;"> </div>
<!-- Buttons -->
<div class="tile is-ancestor">
<!-- Collected "Mine" (Star) Button -->
<div class="tile is-parent">
<article class="tile is-child">
<div class="star">
<label>
<span class="fa-stack">
<i class="fas fa-star fa-2x"></i>
<h4 class="subtitle is-5 has-text-light is-bold">Mine</h4>
<input class="mine is-hidden" type="checkbox" id="mine#$amiibo.AmiiboID#$amiibo.Name">
</span>
</label>
</div>
</article>
</div>
<!-- Collected "Love" (Heart) Button -->
<div class="tile is-parent">
<article class="tile is-child">
<div class="heart">
<label>
<span class="fa-stack">
<i class="fas fa-heart fa-2x"></i>
<h4 class="subtitle is-5 has-text-light is-bold">Love</h4>
<input class="love is-hidden" type="checkbox" id="love#$amiibo.AmiiboID#$amiibo.Name" value="$amiibo.Favorited">
</span>
</label>
</div>
</article>
</div>
<!-- Collected "Want" (Gem) Button -->
<div class="tile is-parent">
<article class="tile is-child">
<div class="gem">
<label>
<span class="fa-stack">
<i class="fas fa-gem fa-2x"></i>
<h4 class="subtitle is-5 has-text-light is-bold">Want</h4>
<input class="want is-hidden" type="checkbox" id="want#$amiibo.AmiiboID#$amiibo.Name">
</span>
</label>
</div>
</article>
</div>
</figcaption>
</figure>
</center>
</article>
</div>
#end
</div>
Проблема в том, что я получаю проверенное значение: $ amiibo.Favoritedвместо 'Y' или 'N', который должен генерироваться из скорости через значение = "$ amiibo.Favorited
Я открыт для более эффективных способов справиться с этим также.
РЕДАКТИРОВАТЬ: Итак, я изменил некоторые данные, похоже, что они / своего рода / работают ... Я обнаружил, что если первая итерация в моем #foreach по скорости установлена в Y или другое значение, то все последующие элементы divполучить то же значение из JavaScript. Я думаю, что есть проблема с «ЭТО», но все еще не уверен, как исправить.
Спасибо! Трэвис W.