JavaScript MouseOver работает только для первого экземпляра в выражении Velocity #foreach - PullRequest
Новая
       10

JavaScript MouseOver работает только для первого экземпляра в выражении Velocity #foreach

0 голосов
/ 03 сентября 2018

Я все еще довольно новичок в JavaScript. Извините заранее. У меня есть HTML-код и оператор Veforeity Template Engine #foreach для рендеринга html-кода из базы данных.

Идея состоит в том, чтобы навести курсор мыши на визуализированные изображения и получить более. У меня проблема (я думаю) с javascript, заключается в том, что ТОЛЬКО первое визуализированное изображение фактически получает оверлей. Почему-то все после первого нет. 

$(document).ready(function(){

    var amiibo = document.getElementById("amiibo");
    var activeAmiiboID = amiibo.textContent || amiibo.innerText;

    $("#inactive-"+activeAmiiboID).mouseover(function() {
        console.log("#inactive has been moused over / activeAmiiboID: "+ activeAmiiboID);
        $("#active-"+activeAmiiboID).removeClass("is-invisible");
    });

Вот фрагмент кода 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">$amiibo.AmiiboID</div>

            <article class="message is-large is-danger">
                <div class="message-header">
                    <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">
                                                </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">
                                                </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">
                                                </span>
                                            </label>
                                        </div>
                                    </article>
                                </div>

                        </figcaption>
                    </figure>
                </center>
            </article>
        </div>
    #end
</div>

Что я делаю не так? Любая помощь или руководство с благодарностью.

Трэвис В.

1 Ответ

0 голосов
/ 03 сентября 2018

Ожидается текущий результат, потому что теперь вы нацеливаете изображение только с текущим activeAmiiboID. Вы должны настроить таргетинг на все изображения по классу, чтобы получить желаемую функциональность: 

$(document).ready(function(){

    $('.amiibo-image').mouseover(function() {
        var imgId = $(this).attr('id');
        var id = imgId.split('-')[1];
        $("#active-"+ id).removeClass("is-invisible");
    });
});
...