仅显示第一个元素答案

【问题标题】：Only the first element is showing仅显示第一个元素
【发布时间】：2015-08-28 21:26:49
【问题描述】：

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

我尝试了很多东西，但没有成功，所以我在这里。

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

【问题讨论】：

标签： javascript jquery html css custom-data-attribute

【解决方案1】：

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

返回命名数据存储中 first 元素的值一组匹配的元素。

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

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

Updated Fiddle

【讨论】：

非常感谢斯特赖纳先生

【解决方案2】：

你可以根据this获取属性并显示。试试下面的代码。这里是更新的小提琴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>

【讨论】：

【解决方案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"
});
});

【讨论】：