标签：jquery javascript
我有一个图像列表.在悬停时,我需要在每行上调用LI上的函数,该函数会隐藏除当前图像之外的该行中的所有图像.只有一个清单.
我有JS为每一行添加数据属性(为简洁起见,这不包括在代码示例中).如何挂钩在行上动态设置的数据属性以调用显示和隐藏每行图像的函数？目前,所有行都有动画效果.
小提琴
http://jsfiddle.net/simply_simpy/2dNgF/
HTML
<div class="container" id="main">
<div id="add-8" class="row">
<div class="col-lg-11">
<ul class="list-unstyled list-inline the-wrap add-8 show-text">
<li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
"cover" "><img src=
"http://i.imgur.com/zK3d6yX.png?1" /></span></li>
<li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
"cover" "><img src=
"http://i.imgur.com/zK3d6yX.png?1" /></span></li>
<li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
"cover" "><img src=
"http://i.imgur.com/zK3d6yX.png?1" /></span></li>
<li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
"cover" "><img src=
"http://i.imgur.com/zK3d6yX.png?1" /></span></li>
<li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
"cover" "><img src=
"http://i.imgur.com/zK3d6yX.png?1" /></span></li>
<li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
"cover" "><img src=
"http://i.imgur.com/zK3d6yX.png?1" /></span></li>
<li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
"cover" "><img src=
"http://i.imgur.com/zK3d6yX.png?1" /></span></li>
<li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
"cover" "><img src=
"http://i.imgur.com/zK3d6yX.png?1" /></span></li>
<li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
"cover" "><img src=
"http://i.imgur.com/zK3d6yX.png?1" /></span></li>
<li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
"cover" "><img src=
"http://i.imgur.com/zK3d6yX.png?1" /></span></li>
<li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
"cover" "><img src=
"http://i.imgur.com/zK3d6yX.png?1" /></span></li>
<li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
"cover" "><img src=
"http://i.imgur.com/zK3d6yX.png?1" /></span></li>
<li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
"cover" "><img src=
"http://i.imgur.com/zK3d6yX.png?1" /></span></li>
<li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
"cover" "><img src=
"http://i.imgur.com/zK3d6yX.png?1" /></span></li>
<li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
"cover" "><img src=
"http://i.imgur.com/zK3d6yX.png?1" /></span></li>
<li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
"cover" "><img src=
"http://i.imgur.com/zK3d6yX.png?1" /></span></li>
<li data-row="3"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
"cover" "><img src=
"http://i.imgur.com/zK3d6yX.png?1" /></span></li>
</ul>
</div>
</div>
CSS
#main {
background: #fff;
overflow: hidden;
min-height: 800px;
}
.wrap-the-wrap {
position: relative;
}
.tell-story .hidden {
display: none;
}
ul.the-wrap {
overflow: hidden;
}
ul.the-wrap p {
margin: 0;
}
ul.the-wrap img {
width: 133px;
height: auto;
}
ul.the-wrap .cover {
position: absolute;
bottom: -150px;
left: 0;
}
ul.the-wrap .more {
width: 37px;
height: 36px;
display: block;
position: absolute;
bottom: -15px;
left: 0;
}
ul.the-wrap li {
float: left;
position: relative;
padding-left: 0;
padding-right: 0;
margin-left: 2px;
}
ul.the-wrap .text {
width: 300px;
position: absolute;
left: 150px;
top: 30px;
z-index: 1;
display: none;
color: #333;
}
JS
$(document).on("mouseenter", ".add-8 li", function () {
$(this).find(".cover").addClass('current');
animateCover("-30px");
$(this).find(".text").fadeIn("fast");
});
//covers image with white image
$(document).on("mouseleave", ".add-8 li", function () {
$(this).find(".cover").removeClass('current');
animateCover("-150px");
$(this).find(".text").fadeOut("fast");
})
function animateCover(pos) {
$("li .cover")
.not(".current")
.stop()
.animate({"bottom": pos}, 250);
}
解决方法:
注意：由于脚本已经很大,因此添加为不同的答案
带有数据属性
$(document).on("mouseenter", ".add-8 li", function () {
var $this = $(this), rowId = $this.attr('data-row');
$this.find(".cover").addClass('current');
animateCover($this.siblings('[data-row="' + rowId + '"]'), "-30px");
$this.find(".text").fadeIn("fast");
});
//covers image with white image
$(document).on("mouseleave", ".add-8 li", function () {
var $this = $(this), rowId = $this.attr('data-row');
$this.find(".cover").removeClass('current');
animateCover($this.siblings('[data-row="' + rowId + '"]'), "-150px");
$this.find(".text").fadeOut("fast");
})
$(window).resize(assignRowIds);
assignRowIds();
function assignRowIds(){
var $els = $('.add-8 li'), row = 0, top;
$els.each(function(){
var $this = $(this), eltop = $this.offset().top;
if(eltop != top){
row++;
top = eltop;
}
$this.attr('data-row', row)
})
}
function animateCover($rowels, pos) {
$rowels.find('.cover')
.not(".current")
.stop()
.animate({"bottom": pos}, 250);
}
演示：Fiddle
标签：jquery,javascript 来源： https://codeday.me/bug/20190703/1368363.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。