Asp.net MVC：无法在我的视图中选择正确的属性值答案

【问题标题】：Asp.net MVC: Cannot select the right attribute value in my ViewAsp.net MVC：无法在我的视图中选择正确的属性值
【发布时间】：2021-04-02 08:45:34
【问题描述】：

我的代码：


@{
    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>





<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" data-id="@Model[i].VideoId"/>
                    <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" id="@Model[i].VideoId">
                    <li class="menu-item"><a href="@Url.Action("Delete", "Video", new {id = Model[i].Id})">Delete</a></li>
                    <li class="menu-item"><a href="">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 clickable" data-id="@Model[i].VideoId"/>

                    <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" id="@Model[i].VideoId">
                    <li class="menu-item"><a href="@Url.Action("Delete", "Video", new {id = Model[i].Id})">Delete</a></li>
                    <li class="menu-item"><a href="">Edit </a> </li>
                </ul>
            }
        </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 clickable" data-id="@Model[i].VideoId"/>

                    <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" id="@Model[i].VideoId">
                    <li class="menu-item"><a href="@Url.Action("Delete", "Video", new {id = Model[i].Id})">Delete</a></li>
                    <li class="menu-item"><a href="">Edit </a> </li>
                </ul>
            }

        </div>
    </div>

</div>
<div class="out-click"> something</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 && width > 600) {
                $(".div2").remove();
            }
            else {
                $(".div1").remove();
            }

        });

        //const clickable = $(".clickable");
        const clickable = document.getElementsByClassName("clickable");
        for (var i = 0; i < clickable.length; i++) {
            console.log(clickable[i].getAttribute('src'));
        }


        //const menu = $(".menu");
        const menu_aux = document.getElementsByClassName("menu");
        //const outClick = $(".out-click");
        const outClick = document.getElementsByClassName("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++) {
                var id = clickable[i].getAttribute('data-id');
                var menu = document.getElementById(id);
                    menu.style.top = `${e.clientY}px`;
                    menu.style.left = `${e.clientX}px`;
                menu.classList.add('show');
                console.log(id);
                //}
                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_aux.length; j++) {
                    menu_aux[j].classList.remove('show');
                }
                for (var j = 0; j < outClick.length; j++) {
                    outClick[j].style.display = "none";
                }
            });
        }


    </script>
}

在脚本中的事件监听器中，我通过 Id 选择要在屏幕上显示的菜单，即每个视频的唯一性，即它的 videoId。问题是它总是为错误的视频显示相同的菜单，所以当我从菜单中选择“删除”时，它会删除错误的视频（总是相同的视频）。 id 是唯一的。另外，我在我的 div 中使用 div2 类（对于宽度较小的屏幕，div1 出现在屏幕上）。我在浏览器中右键单击并“检查”检查了我的正文（html），我设置为菜单 id 的 videoId 对于每个视频都是唯一的，并且可点击具有正确的 data-id 属性，所以我不明白为什么在控制台上.log 它显示错误的 videoId（来自每个具有“可点击”类的元素的 data-id 属性）。

【问题讨论】：

标签： javascript html jquery css asp.net-mvc

【解决方案1】：

由于id 在循环内添加事件侦听器的范围，您的原始方法存在问题。通过在添加侦听器之前获取 id 并使用 let 将其设置为该循环迭代的本地，也可以解决您的问题。两种方法都有效。

    for (var i = 0; i < clickable.length; i++) {
        let id = clickable[i].getAttribute('data-id');
        clickable[i].addEventListener('contextmenu', e => {
            e.preventDefault();
            //for (var j = 0; j < menu.length; j++) {
            var menu = document.getElementById(id);
                menu.style.top = `${e.clientY}px`;
                menu.style.left = `${e.clientX}px`;
            menu.classList.add('show');
            console.log(id);
            //}
            for (var j = 0; j < outClick.length; j++) {
                outClick[j].style.display = "block";
            }
        });
    }

【讨论】：

【解决方案2】：

解决了！在我的事件侦听器中，我得到了可点击 [i] 的 id，但我有一个常量值，在我的所有可点击 [i] 元素获取它们的事件侦听器之后，它永远不会改变。我只是在我的函数处理程序中编写了 e.target (event.target) 而不是 clickable[i]，每次右键单击都会调用它。

for (var i = 0; i < clickable.length; i++) {
            clickable[i].addEventListener('contextmenu', e => {
                e.preventDefault();
                //for (var j = 0; j < menu.length; j++) {
                var target = e.target;
                var id = $(target).attr('data-id');
                console.log(id);
                var menu = document.getElementById(id);
                    menu.style.top = `${e.clientY}px`;
                    menu.style.left = `${e.clientX}px`;
                menu.classList.add('show');
                
                //}
                for (var j = 0; j < outClick.length; j++) {
                    outClick[j].style.display = "block";
                }
            });
        }

【讨论】：