只有第一个元素显示出来

Only the first element is showing

本文关键字：显示 元素 第一个      更新时间：2023-09-26

我想在data-attr的帮助下显示一个缩略图上的鼠标悬停事件，但只有第一个缩略图是有效的。

演示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文档(我自己强调):

返回元素中第一个元素在指定数据存储处的值匹配元素的集合。

修复它的一种方法是简单地使用$(this).data("img")(您已经检查了):

var dataAnim = $(this).data("img")
$('.graph-anim .animation[data-anim=' + dataAnim + ']').css({
    "opacity": "1"
});

更新小提琴

您可以获取属性并根据此显示。试试下面的代码。这里是更新后的小提琴

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"
});
});
相关文章：