Question

我想借助data-attr在缩略图上显示img on mouseover事件，但只有第一个缩略图正常工作。

我尝试过很多东西，但没有成功因此我就在这里。

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"
 });
});

Answer 1

从.data文档（我自己强调）：

返回指定数据存储区中 第一个 元素的值一组匹配的元素。

解决问题的方法是简单地使用$(this).data("img")（您已经检查过）：

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

<强> Updated Fiddle

Answer 2

您可以根据此获取属性并显示。请尝试以下代码。其中包含更新的小提琴fiddle

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

＆＃13;

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"
    });
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 3

不确定这种方法对您是否合适，但我将您的脚本简化为：

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"
});
});

只显示第一个元素

3 个答案: