Блог

Главная - Вопросы по программированию - Asp.net mvc: мои прослушиватели событий (в теге View ) работают только один раз

Asp.net mvc: мои прослушиватели событий (в теге View ) работают только один раз

#javascript #html #css #asp.net-mvc

#javascript #HTML #css #asp.net-mvc

Вопрос:

Я видел этот вопрос в StackOverflow, но это мне не помогло, потому что мой код совершенно другой. Я пытаюсь вызвать меню при щелчке правой кнопкой мыши на изображении, и оно работает нормально, но только один раз. Вот мое мнение:

 @{
    ViewBag.Title = "Index";
}

<h2>Index</h2>


<div class="container div1">
    <div class="row">
        <div class="column">
            @for (int i = 0; i < Model.Count; i  = 2)
            {
                <div class="hov" style="position:relative; background-image: url(@Model[i].ImgLink); background-position: center; background-size: cover; margin-top: 2%;">

                    <img src="@Model[i].ImgLink" class="img-fluid clickable" />
                    <img src="~/Videos/play_button.png" class="play-btn" data-toggle="modal" data-target="#@Model[i].Id" />
                </div>
                <div class="modal fade" id="@Model[i].Id">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-body">
                                <iframe width="560" class="venobox" height="315" src=@("https://www.youtube.com/embed/"   Model[i].VideoId) frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>
                <ul class="menu">
                    <li class="menu-item"><a href="" data-id=@Model[i].Id>Delete</a></li>
                    <li class="menu-item"><a href="" data-id=@Model[i].Id>Edit </a> </li>
                </ul>
            }
        </div>
        <div class="column">
            @for (int i = 1; i < Model.Count; i  = 2)
            {
                <div class="hov" style="position: relative; background-image: url( @Model[i].ImgLink ); background-position: center; background-size: cover; margin-top: 2%;">

                    <img src="@Model[i].ImgLink" class="img-fluid" />

                    <img src="~/Videos/play_button.png" class="play-btn" data-toggle="modal" data-target="#@Model[i].Id" />
                </div>
                <div class="modal fade" id="@Model[i].Id">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-body">
                                <iframe width="560" class="venobox" height="315" src=@("https://www.youtube.com/embed/"   Model[i].VideoId) frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
    <div class="out-click"></div>
</div>





<div class="container div2">
    <div class="row">
        <div class="column">
            @for (int i = 0; i < Model.Count; i  = 3)
            {
                <div class="hov" style="position:relative; background-image: url(@Model[i].ImgLink); background-position: center; background-size: cover; margin-top: 2%;">

                    <img src="@Model[i].ImgLink" class="img-fluid clickable" />
                    <img src="~/Videos/play_button.png" class="play-btn" data-toggle="modal" data-target="#@Model[i].Id" />
                </div>
                <div class="modal fade" id="@Model[i].Id">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-body">
                                <iframe width="560" class="venobox" height="315" src=@("https://www.youtube.com/embed/"   Model[i].VideoId) frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>
                <ul class="menu">
                    <li class="menu-item"><a href="" data-id=@Model[i].Id>Delete</a></li>
                    <li class="menu-item"><a href="" data-id=@Model[i].Id>Edit </a> </li>
                </ul>
            }
        </div>
        <div class="column">
            @for (int i = 1; i < Model.Count; i  = 3)
            {
                <div class="hov" style="position: relative; background-image: url( @Model[i].ImgLink ); background-position: center; background-size: cover; margin-top: 2%;">

                    <img src="@Model[i].ImgLink" class="img-fluid" />

                    <img src="~/Videos/play_button.png" class="play-btn" data-toggle="modal" data-target="#@Model[i].Id" />
                </div>
                <div class="modal fade" id="@Model[i].Id">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-body">
                                <iframe width="560" class="venobox" height="315" src=@("https://www.youtube.com/embed/"   Model[i].VideoId) frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
        <div class="column">
            @for (int i = 2; i < Model.Count; i  = 3)
            {
                <div class="hov" style="position: relative; background-image: url( @Model[i].ImgLink ); background-position: center; background-size: cover; margin-top: 2%;">

                    <img src="@Model[i].ImgLink" class="img-fluid" />

                    <img src="~/Videos/play_button.png" class="play-btn" data-toggle="modal" data-target="#@Model[i].Id" />
                </div>
                <div class="modal fade" id="@Model[i].Id">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-body">
                                <iframe width="560" class="venobox" height="315" src=@("https://www.youtube.com/embed/"   Model[i].VideoId) frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
    <div class="out-click"></div>
</div>
<style>
    body{
        margin: 0;
        padding: 0;
    }
    .play-btn {
        width: 3.5em;
        cursor: pointer;
        transition: 0.5s;
        opacity: 0;

        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: block;
        margin: auto;
    }

    .img-fluid{
        width: 30em;
        height: auto;
    }
    .hov:hover .play-btn{
        opacity: 1;
    }
    .row {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .row .column {
        flex: 33.3%;
        width: auto;
        overflow: hidden;
        padding: 0 4px;
        height: 100%;
    }

    .row .column .img-fluid {
         margin-top: 2%;
         width: 100%;
         height: 100%;
    }

    .menu {
        display: block;
        background-color: white;
        padding: 10px 0px;
        border-radius: 5px;
        box-shadow: 2px 2px 30px lightgrey;
        position: absolute;
        transform-origin: center;
        z-index: 2;
        opacity: 0;
        transform: scale(0);
        transition: transform 0.2s, opacity 0.2s;
    }

        .menu.show {
            opacity: 1;
            transform: scale(1);
            transform-origin: top left;
        }

    .menu-item {
        display: block;
        padding: 10px 30px;
        transition: 0.1s;
        color: #666;
    }

        .menu-item:hover {
            background-color: #eee;
            cursor: pointer;
        }

    .out-click {
        height: 100vh;
        width: 100vw;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
        display: none;
    }

    @@media only screen and (max-width: 800px) {
        .row .column {
            flex: 50%;
        }
        .play-btn {
            width: 3em;
        }
        .img-fluid{
            
        }
    }

    @@media only screen and (max-width: 600px) {
        .row .column {
            flex: 100%;
        }
        iframe {
            width: 100%;
            height: auto;
        }
    }
</style>

@section scripts{
<script>
    $(document).ready(function () {
        var width = $(window).width();
        if (width <= 800 amp;amp; width > 600) {
            $(".div2").remove();
        }
        else {
            $(".div1").remove();
        }
        const clickable = $(".clickable");
        const menu = $(".menu");
        const outClick = $(".out-click");

        for (var i = 0; i < clickable.length; i  ) {
            clickable[i].addEventListener('contextmenu', e => {
                e.preventDefault();
                for (var j = 0; j < menu.length; j  ) {
                    menu[j].style.top = `${e.clientY}px`;
                    menu[j].style.left = `${e.clientX}px`;
                    menu[j].classList.add('show');
                }
                for (var j = 0; j < outClick.length; j  ) {
                    outClick[j].style.display = "block";
                }
            });
        }
        for (var i = 0; i < outClick.length; i  ) {
            outClick[i].addEventListener('click', () => {
                for (var j = 0; j < menu.length; j  ) {
                    menu[j].classList.remove('show');
                }
                outClick[i].style.display = "none";
            });
        }
        
    });
    
</script>
}

Я сделал это только для первого изображения в классах div1 и div2, для теста. Я скопировал часть кода для прослушивателей событий отсюда:
https://technokami.in/custom-right-click-context-menu-using-html-css-javascript
Если мое представление слишком велико, чтобы вы могли найти, что с ним не так, посетите страницу выше, потому что она содержит только прослушиватели событий с проблемой. Кроме того, поскольку у меня есть несколько изображений, на которые я хочу реагировать при щелчке правой кнопкой мыши, я использовал классы вместо идентификаторов для получения элементов. И внутри тега я должен использовать for-s , потому что классы возвращают коллекцию элементов. Это должно быть единственным отличием. Я также попытался поместить код за пределы document.ready, и это было то же самое.

Ответ №1:

Хотя я не очень хорошо разбираюсь в js или jQuery, я исправил это. По какой-то причине он не смог найти элементы класса «out-click», и я получал «Uncaught TypeError: не удается прочитать свойство ‘style’ неопределенного в HTMLDivElement.» ошибка. Я поместил последнюю инструкцию из своего скрипта в другой for; for (var j = 0; j < outClick.length; j ) { outClick[j].style.display = "none";} и это сработало.