Javascript 未从 HTML 中的（此）记录的 Veleocity 中的复选框获取值

Question

在 Javascript/jQuery 上仍然很新。这是场景...我正在使用 Velocity 模板引擎生成我的 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'，这应该是通过 value="$amiibo.Favorited

我也愿意接受更好的方法来处理这个问题。

编辑：所以我更改了一些数据，它看起来/有点/工作......我发现如果我的#foreach in velocity 中的第一次迭代设置为 Y 或另一个值，那么所有后续的 div 都会相同来自 javascript 的值。我认为 "THIS" 有问题，但仍不确定如何解决。

谢谢！特拉维斯 W.

Answer 1

可能是 美元符号转义 问题...您可以尝试将 $amiibo.Favorited 替换为 [=16= 中的 $amiibo.Favorited ] 元素在这种情况下为

Answer 2

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

Javascript 未从 HTML 中的（此）记录的 Veleocity 中的复选框获取值

Javascript not getting Value from Checkbox in Veleocity for (This) Record in HTML

html

javascript

jquery

velocity