问题描述
我的代码:
@{
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",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",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 选择要在屏幕上显示的菜单,每个视频都是唯一的,它是视频 ID。问题是它总是为错误的视频显示相同的菜单,所以当我从菜单中选择“删除”时,它会删除错误的视频(总是相同的视频)。 id 是唯一的。此外,我在我的 div 中使用类 div2(对于宽度较小的屏幕,div1 出现在屏幕上)。我在浏览器中右键单击并“检查”检查了我的正文(html),我设置为菜单 id 的 videoId 对于每个视频都是唯一的,并且可点击具有正确的 data-id 属性,所以我不明白为什么在控制台上.log 它显示错误的 videoId(来自每个具有“clickable”类的元素的 data-id 属性)。
解决方法
由于 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";
}
});
}
,
解决了!在我的事件侦听器中,我获得了 clickable[i] 的 id,但是我有一个常量值,在我的所有 clickable[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";
}
});
}