javascript - 在不重复 .mouseover() 函数的情况下迭代 div 组件

标签 javascript jquery html css

大家好

我需要帮助......

我有这个 html(ejs) View ，我正在用我得到的数据动态渲染它...... 它作为单个 div 工作正常。当我有多个数据并遍历它时，组件的另一部分通过创建显示数据所需的 div 数量按预期工作。现在，当我触摸第一个 div 时，div 应该显示在每个 div 的 mouseover() 弹出窗口上。 我似乎找不到逻辑错误... (我正在使用 express 和 node js) 请帮忙

提前谢谢你

下面是我的代码

<!DOCTYPE html>

<html>
<head>
<title>TODO supply a title</title>
<link href="/css/index.css" rel="Stylesheet"/>
<script src="/jquery/dist/jquery.min.js"></script>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>
<div id="wrapper">
<div id="container">

<form action="/models/top100.js">

<div  id="bodydiv" > <div id="leftdiv" > 
<% for (let a=0; a < 2; a++){%>
<ul class="innerdiv" >
<li class="arrowdiv">
<img src='images/orangearrow.png'  alt="" id='imgdiv' class='imgdiv' data-
src='images/orangearrow.png' data-hover='images/whitearrow.png'/>

<ul class="popup" id="popup">
<li class="col1">1
</li><li class="col2">2
</li><li class="col3">  3
</li><li class="col4">
<img src="images/blackarrow.png"  alt="" class="col4"/>
</li>
</ul>

</li><li class="artdiv">
<ul>
<li class="contentdiv"><%= [a] %></li>
<li class="rcontentdiv">image</li>
<li class="ccontentdiv"><%= [a]%></li>
</ul></li>
</ul>
<%} %>
</div>

</div> 

</form>

</body>
</html>

鼠标悬停的 jquery 函数

<script>
$(".imgdiv").mouseover(function () {
    $(this).attr('src', $(this).data("hover"));
    $( ".popup" ).toggle('slow');
}).mouseout(function () {
    $(this).attr('src', $(this).data("src"));
    $( ".popup" ).hide();
});
</script>

CSS

*
{
margin: 0px;
}
#admin
{
margin-top: 100px;
font-family:"Times New Roman";
font-size: 14px;
font-weight: bold;
margin-left: 400px;
line-height: 30px;
}
.comp1
{
margin-left: 20px;
}

.comp2
{
margin-left: 30px;
}
.comp3
{
margin-left: 25px;
}

#login
{
margin-top: 100px;
font-family:"Times New Roman";
font-size: 14px;
font-weight: bold;
margin-left: 400px;
line-height: 20px;
}
.comp
{
align-content: center;
font-weight: bold;
background-color: black;
color: white;
width: 80px;
height: 25px;
margin-left:100px;
margin-top: 10px;
}
.comp5
{
align-content: center;
font-weight: bold;
background-color: black;
color: white;
width: 80px;
height: 25px;
margin-left:20px;
margin-top: 10px;
}
.comp6
{
align-content: center;
font-weight: bold;
background-color: black;
color: white;
width: 80px;
height: 25px;
margin-left:10px;
margin-top: 10px;
}
body
{
background-color:  white;  
font-family: "Intro-Inline";

}

/* @font-face kit by Fonts2u (http://www.fonts2u.com) */
@font-face {font-family:"Intro-Inline";src:url("mywebfonts/Intro_Inline.eot?") 
        format("eot"),url("mywebfonts/Intro_Inline.woff") format("woff"),
                url("mywebfonts/Intro_Inline.ttf")
        format("truetype"),url("mywebfonts/Intro_Inline.svg#Intro-Inline") format("svg");
    }

/*wrapper for the main container*/
#wrapper
{
margin: auto;
}
/*all divs under this container to be maintained in aspect*/
#container
{
position:absolute;
margin:0px auto;
}

/*wrapper for navigation divs and <a>*/    
.wrapper1{
width:780px;
height:55px;
margin-left: 15vh;
margin-top:30px;
text-align:  left;
display: inline-block;
border-width: 4px;
border-style: solid;
border-color: orange;
position: static;
}
/*div for charts news music*/
.div1
{
width:380px;
height:50px;
font-size: 25px;
font-weight:  lighter;
color: white;
float:left;
padding:0px 10px 0px 10px;
text-align:  left;
border-width: 4px;
border-style: solid;
border-color: red;
}
/*div for facebook twitter instagram and search*/
.searchdiv
{
width:140px;
height:50px;
float:left; 
/*  padding:0px;
margin:0px;
line-height: 0px;
font-size: 0px;
margin-left:0px;*/
white-space:  nowrap;
display:inline-block;
border-style: solid;
border-color:yellow;
border-width:4px;
}
.menudiv{

float:right;
padding-right: 50px;
margin-left: 30px;}
/*searchboxdiv*/
.searchboxdiv
{
width:120px;
height:40px;
white-space:nowrap;
font-size:0px;
display:inline-block;
align-items:  center;
float:left ;
padding:0px 30px 0px 0px;
border-width: 4px;
border-style: solid;
border-color: chartreuse;
}
.searchicon
{
width:20px;
margin:0 auto;
padding:0px;
/* float:left;*/

}
/*div for menu*/
.divmenu
{
width:50px;
height:50px;
float:left;
margin-left: 0vh;
border-width: 4px;
border-style: solid;
border-color: green;
}
/*navigation*/
nav
{
position:fixed;
width:100%;
height:120px;
/*   background-color: rgba ();*/
background-color: black;
text-align: right;
vertical-align:  middle;
color:white;

/*  padding:5px 0px 20px 0px;*/
z-index: 99;

}
nav a
{
color: white;
/*font-weight: bold;*/
font-size: 18px;
text-decoration: none;
margin-left: 30px;
line-height: 150px;
/*  padding:0px 10px 0px 10px;*/

}
/*div for logo*/
.logodiv
{
float:left;
color:white;
width: 80px;
/*  margin-left: 5vh;*/
margin-top:5vh;
margin-bottom:2vh;
font-weight: bolder;
font-size: 50px;
z-index:10;
position: fixed; /*newly added*/
left: 30vh; /*newly added*/
/* padding:0vh 100vh 0vh 0vh;*/
vertical-align: middle;
}

/*css for the icons on nav*/
.icons
{
width:20px;
height:20px;

}
/*css for the body*/
#bodydiv
{
margin:0 auto;
padding:0px;
}

#leftdiv
{
margin-top:30vh;
margin-left:30vh;
width:80vh;
height:75vh;
float:left;
margin-bottom: 2vh;
/*    border-width: 4px;
border-style: solid;
border-color: yellow;*/
}


#rightdiv
{
margin-top: 30vh;
float:right;
margin-left: 130vh;
position: fixed;
width:40vh;
height:75vh;
/*   border-width: 4px;
border-style: solid;
border-color: yellow;*/
}
.topdiv
{

width:35vh;
height:35vh;
text-align:  center;
vertical-align:  middle;
background-color:  gray;
/*   border-width: 4px;
border-style: solid;
border-color: red;*/
color:black;
word-wrap: true; 
font-size: 26;
float: right;
min-width: 25%;
}
.innertopdiv
{

width:35vh;
height:25vh;
text-align:  center;
vertical-align:  middle;

margin-top: 5vh;
background-color:  rgb(58, 14, 14);
/*   border-width: 4px;
border-style: solid;
border-color: red;*/
color:white;
word-wrap: true; 
font-size: 26;
float: right;
min-width: 25%;
}
.bottomdiv
{

line-height:  100px;
text-align:  center;
width:35vh;
height:30vh;
margin-top:5vh;
background-color:  black;
/*  border-width: 4px;
border-style: solid;
border-color: orange;*/
float: right;
min-width: 25%;
}
/*div to multiply
tr{

}*/
.innerdiv
{


width:80vh;
height:20vh;
padding:0px;
list-style-type: none;
margin:0px;
float:left;
position:relative;
background-color: gray;
border-width: 1px;
border-style: solid;
display:inline-block;
border-color: black;
text-decoration: none;
list-style-type: none;
}
.artdiv
{


width:71vh;
height:19.5vh;
padding:0px;
top:2px;
list-style-type: none;
text-decoration: none;

margin:0px;
right: 5px;
float:right;
position:relative;
background-color: gray;
display:table-cell;
/*      border-width: 1px;
border-style: solid;
border-color: black;
text-decoration: none;
list-style-type: none;*/
}
.artdiv:hover
{


width:71vh;
height:19.5vh;
padding:0px;
top:2px;
list-style-type: none;
text-decoration: none;

margin:0px;
right: 5px;
float:right;
position:relative;
background-color: #909090;
display:table-cell;
}

.innertop
{
z-index: 99;
position:  fixed;
width:34.5vh;
height:5vh;
background-color: black;
color: white;
font-stretch:  extra-expanded;
font-size:25px;
line-height: 30px;
border-width: 1px;
border-style: solid;
border-color: black;

}
.innerbottom
{
z-index: 99;
position:  fixed;
width:35vh;
height:5vh;
background-color:gray;
color: white;
font-stretch:  extra-expanded;
font-size:28px;
line-height: 30px;

}
/*div working for contents of music*/
.contentdiv
{
width:23.3vh;
height:15vh;
list-style: none;
vertical-align:  middle;
top:20px;
right: 30px;
/*margin-top:2vh;*/
text-decoration: none;
display:table-cell;
margin-right:5vh;
background-color:  orange;
text-align:  center;
text-decoration: none;
}
.arrowdiv
{
width:8vh;
height:19.9vh;
line-height:  1vh;
margin-right:1vh;
vertical-align:  middle;
background-color: black;
display:inline-block;
text-decoration: none;
}
.arrowdiv:hover
{
width:8vh;
height:19.9vh;
line-height:  1vh;
margin-right:1vh;
vertical-align:  middle;
background-color: #282828 ;
display:inline-block;
text-decoration: none;
}

.ccontentdiv
{
width:23.3vh;
height:15vh;
vertical-align:  middle;
list-style: none;
top:20px;
/* right: 10px;*/
right:10px;
/*margin-top:2px;*/
margin-left: 1vh;
margin-right:8vh;
text-decoration: none;
/* background-color: red;*/
display:table-cell;
background-color:  rgb(245, 239, 220);
text-align:center;

}
.rcontentdiv
{
width:23.3vh;
height:15vh;
list-style: none;
vertical-align:  middle;
top:20px;
right: 20px;
/* margin-top:1vh;*/
margin-left: 1vh;
margin-right: 2vh;
background-color:  beige;
text-align:  center;
display:table-cell;
text-decoration: none;
}




.arrowtab
{
width:10vh;
height:20vh;
background-color: aqua;
float:left;
}
.normtab
{
width:70vh;
height:20vh;
background-color:olive;
float:right;
}
.newRow
{
width:79.5vh;
background-color:  gray;
border-bottom: 1px;

border-bottom-color: black;
border-bottom-style: solid;
}
.hoverdiv
{
width:3vh;
height:5vh;
background-color:  beige;
border-width: 2px;
border-style: solid;
border-color: red;
float:left;

}


.leftsub
{
width:60px;
height:10px;
float: left;
border-width: 2px;
border-style: solid;
border-color: green;

}

.popup
{
width:150px;
height:40px;
float: right;
font-size: 12px;
text-align:  center;
position: relative;
margin:0px;
padding:0px;
/*background-color: yellow;*/
display: none;
vertical-align: middle;
margin-right:30px;
/*line-height:  10%;*/
/*  border-width: 2px;
border-style: solid;
border-color: green; */
text-decoration: none;
list-style-type: none;

}
.popup:hover
{
width:150px;
height:40px;
float: right;
font-size: 12px;
text-align:  center;
position: relative;
/*background-color: yellow;*/
display: table-cell;
vertical-align: middle;
margin-right: 30px;
margin:0px;
bottom: 150px;
/*line-height:  10%;*/
text-decoration: none;
list-style-type: none;

padding:0px;

}
ul>li>a{
text-decoration: none;
color:white;
}

.imgdiv
{
margin-top: 50px;
margin-left: 13px;
width:20px;
height:20px;

}
.imgcol
{

width:20px;
height:20px;

}
.col1
{
width:35px;
height:39.5px;
text-align:  center;
line-height: 50%;
font-size: 12px;
vertical-align: middle;
display: table-cell;
background-color: black;
color:white;
border-right:1px solid white;
}

.col2
{
width:35px;
height:39.5px;
text-align:  center;
display: table-cell;
line-height: 50%;
font-size: 12px;
vertical-align: middle;
background-color: black;

color:white;
}
.col3
{
width:35px;
height:39.5px;
text-align:  center;
display: table-cell;

font-size: 12px;
vertical-align: middle;
background-color: black;
color:white;
border-left: 1px solid white;
margin-bottom: 50px;

}
.col4
{
width:20px;
height:20px;
margin-bottom: 3px;
margin-top: 8px;
text-align:  center;
display: table-cell;


}

最佳答案

你的代码的问题是你正在使用

$( ".popup" ).toggle('slow');

这将针对所有 .popup，因此它们都将显示/隐藏

鉴于您当前的代码，您可以这样做

$(this).next().toggle('slow') 和 $(this).next().hide()

此处为简化示例 https://jsfiddle.net/L85ksjr6/1/我正在使用 .show() 因为它更容易显示。至于由于路径原因明显丢失的图像，我在那里放了 alt 文本，在 Firefox 中我可以看到 alt 文本并悬停以查看效果，以防您遇到问题

关于javascript - 在不重复 .mouseover() 函数的情况下迭代 div 组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48446305/

上一篇：javascript - 多个 Bootstrap 卡片的表单验证

下一篇：javascript - 将奇数个盒子两两对齐与 flexbox

相关文章：

javascript - 如何在 D3js 中动态添加图像到圆圈

javascript - 使用 JavaScript 通过鼠标拖动来排序图形列表

javascript - 在数据表分页中显示第一个和最后一个按钮

html - 边界图像，边界半径

Javascript getElementById 在结束循环之前显示隐藏的 div

html - 将图片移至页面右侧

javascript - 使用 jQuery html() 函数将 PHP 变量传递给 div

javascript - jQuery - 使用 HTML 实体转义内联样式

javascript - 如何使用 Razor 从 ASP.net MVC View 中的 JavaScript 内的资源文件中获取值

javascript - 在 JavaScript 中解析 URL

©2024 IT工具网  联系我们