只有第一个元素显示
Only the first element is showing
我想借助 data-attr 在缩略图上的鼠标悬停事件上显示 img,但只有第一个缩略图有效。
演示版http://jsfiddle.net/3gn0kj1k/
我试了很多东西都没有成功所以我来了。
JS 代码:
enter code here
var animIcon = $(".graph-icons img");
var dataAnim = $(".graph-anim .animation").data("anim");
animIcon.mouseenter(function () {
$(".graph-main-img").css({
"opacity": "0"
});
if ($(this).data("img") === dataAnim) {
console.log(dataAnim);
$('.graph-anim .animation[data-anim=' + dataAnim + ']').css({
"opacity": "1"
});
}
});
animIcon.mouseleave(function () {
$(".graph-main-img").css({
"opacity": "1"
});
$(".animation").css({
"opacity": "0"
});
});
来自 .data
文档(我自己强调):
return the value at the named data store for the first element in the
set of matched elements.
修复它的一种方法是简单地使用 $(this).data("img")
(您已经在检查它):
var dataAnim = $(this).data("img")
$('.graph-anim .animation[data-anim=' + dataAnim + ']').css({
"opacity": "1"
});
你可以直接根据这个获取属性和显示。尝试以下 code.here 已更新 fiddle fiddle
var attr=$(this).attr('data-img');
$('.animation[data-anim=' + attr + ']').css({
"opacity": "1"
});
var animIcon = $(".graph-icons img");
animIcon.mouseenter(function () {
$(".graph-main-img").css({
"opacity": "0"
});
var attr=$(this).attr('data-img');
$('.animation[data-anim=' + attr + ']').css({
"opacity": "1"
});
});
animIcon.mouseleave(function () {
$(".graph-main-img").css({
"opacity": "1"
});
$(".animation").css({
"opacity": "0"
});
});
li {
list-style: none;
}
.graph-icons img {
width: 70px;
display: inline-block;
float: left;
padding-right: 30px;
margin-bottom: 50px;
cursor: pointer;
}
.graph-icons:after {
clear: both;
content:"";
display: block;
}
.graph-main {
position: relative;
}
.graph-anim .animation {
position: absolute;
top: 0;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- ICONS -->
<div class="graph-icons">
<li>
<img src="https://upload.wikimedia.org/wikipedia/en/6/6f/KennyMcCormick.png" data-img="kenny">
</li>
<li>
<img src="http://static.giantbomb.com/uploads/scale_small/0/4810/1202378-stan1.jpg" data-img="stan">
</li>
<li>
<img src="https://em.wattpad.com/0bf45eee023c7403ca0cb15d127e6c8852a57d28/687474703a2f2f736f7574687061726b73747564696f732e6d74766e696d616765732e636f6d2f7368617265642f636861726163746572732f6b6964732f6b796c652d62726f666c6f76736b692e6a7067" data-img="kyle">
</li>
</div>
<!-- anim -->
<div class="graph-main">
<div class="graph-main-img">
<img src="http://2.images.southparkstudios.com/default/image.jpg?quality=0.8" alt="">
</div>
<div class="graph-anim">
<div class="animation" data-anim="kenny">
<img src="https://upload.wikimedia.org/wikipedia/en/6/6f/KennyMcCormick.png">
</div>
<div class="animation" data-anim="stan">
<img src="http://static.giantbomb.com/uploads/scale_small/0/4810/1202378-stan1.jpg">
</div>
<div class="animation" data-anim="kyle">
<img src="https://em.wattpad.com/0bf45eee023c7403ca0cb15d127e6c8852a57d28/687474703a2f2f736f7574687061726b73747564696f732e6d74766e696d616765732e636f6d2f7368617265642f636861726163746572732f6b6964732f6b796c652d62726f666c6f76736b692e6a7067">
</div>
</div>
</div>
不确定这种方法是否适合您,但我将您的脚本简化为如下所示:
var animIcon = $(".graph-icons img");
animIcon.mouseenter(function () {
$(".graph-main-img").css({
"opacity": "0"
});
var character = $(this).data("img");
$('.graph-anim .animation[data-anim=' + character + ']').css({
"opacity": "1"
});
});
animIcon.mouseleave(function () {
$(".graph-main-img").css({
"opacity": "1"
});
$(".animation").css({
"opacity": "0"
});
});
我想借助 data-attr 在缩略图上的鼠标悬停事件上显示 img,但只有第一个缩略图有效。
演示版http://jsfiddle.net/3gn0kj1k/
我试了很多东西都没有成功所以我来了。
JS 代码:
enter code here
var animIcon = $(".graph-icons img");
var dataAnim = $(".graph-anim .animation").data("anim");
animIcon.mouseenter(function () {
$(".graph-main-img").css({
"opacity": "0"
});
if ($(this).data("img") === dataAnim) {
console.log(dataAnim);
$('.graph-anim .animation[data-anim=' + dataAnim + ']').css({
"opacity": "1"
});
}
});
animIcon.mouseleave(function () {
$(".graph-main-img").css({
"opacity": "1"
});
$(".animation").css({
"opacity": "0"
});
});
来自 .data
文档(我自己强调):
return the value at the named data store for the first element in the set of matched elements.
修复它的一种方法是简单地使用 $(this).data("img")
(您已经在检查它):
var dataAnim = $(this).data("img")
$('.graph-anim .animation[data-anim=' + dataAnim + ']').css({
"opacity": "1"
});
你可以直接根据这个获取属性和显示。尝试以下 code.here 已更新 fiddle fiddle
var attr=$(this).attr('data-img');
$('.animation[data-anim=' + attr + ']').css({
"opacity": "1"
});
var animIcon = $(".graph-icons img");
animIcon.mouseenter(function () {
$(".graph-main-img").css({
"opacity": "0"
});
var attr=$(this).attr('data-img');
$('.animation[data-anim=' + attr + ']').css({
"opacity": "1"
});
});
animIcon.mouseleave(function () {
$(".graph-main-img").css({
"opacity": "1"
});
$(".animation").css({
"opacity": "0"
});
});
li {
list-style: none;
}
.graph-icons img {
width: 70px;
display: inline-block;
float: left;
padding-right: 30px;
margin-bottom: 50px;
cursor: pointer;
}
.graph-icons:after {
clear: both;
content:"";
display: block;
}
.graph-main {
position: relative;
}
.graph-anim .animation {
position: absolute;
top: 0;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- ICONS -->
<div class="graph-icons">
<li>
<img src="https://upload.wikimedia.org/wikipedia/en/6/6f/KennyMcCormick.png" data-img="kenny">
</li>
<li>
<img src="http://static.giantbomb.com/uploads/scale_small/0/4810/1202378-stan1.jpg" data-img="stan">
</li>
<li>
<img src="https://em.wattpad.com/0bf45eee023c7403ca0cb15d127e6c8852a57d28/687474703a2f2f736f7574687061726b73747564696f732e6d74766e696d616765732e636f6d2f7368617265642f636861726163746572732f6b6964732f6b796c652d62726f666c6f76736b692e6a7067" data-img="kyle">
</li>
</div>
<!-- anim -->
<div class="graph-main">
<div class="graph-main-img">
<img src="http://2.images.southparkstudios.com/default/image.jpg?quality=0.8" alt="">
</div>
<div class="graph-anim">
<div class="animation" data-anim="kenny">
<img src="https://upload.wikimedia.org/wikipedia/en/6/6f/KennyMcCormick.png">
</div>
<div class="animation" data-anim="stan">
<img src="http://static.giantbomb.com/uploads/scale_small/0/4810/1202378-stan1.jpg">
</div>
<div class="animation" data-anim="kyle">
<img src="https://em.wattpad.com/0bf45eee023c7403ca0cb15d127e6c8852a57d28/687474703a2f2f736f7574687061726b73747564696f732e6d74766e696d616765732e636f6d2f7368617265642f636861726163746572732f6b6964732f6b796c652d62726f666c6f76736b692e6a7067">
</div>
</div>
</div>
不确定这种方法是否适合您,但我将您的脚本简化为如下所示:
var animIcon = $(".graph-icons img");
animIcon.mouseenter(function () {
$(".graph-main-img").css({
"opacity": "0"
});
var character = $(this).data("img");
$('.graph-anim .animation[data-anim=' + character + ']').css({
"opacity": "1"
});
});
animIcon.mouseleave(function () {
$(".graph-main-img").css({
"opacity": "1"
});
$(".animation").css({
"opacity": "0"
});
});