Javascript没有从Velocity中的Checkbox中获取值（这个）以HTML格式记录

Question

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;">&nbsp;</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 in velocity中的第一次迭代被设置为Y或另一个值，那么所有后续的div都会得到来自javascript的相同值。我认为“这个”存在问题，但仍不确定如何修复。

谢谢！特拉维斯W.

Answer 1

它可能是逃避美元符号问题...你可以尝试在html元素中替换$amiibo.Favorited而不是$amiibo.Favorited在这种情况下

Answer 2

我最终改变了我这样做的方式。我现在正在使用具有速度的条件。它按预期工作。