只有第一個元素顯示

Question

我想通過data-attr的幫助在縮略圖上顯示img的mouseover事件，但只有第一個縮略圖正在工作。

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

Answer 1

從.data文件（用我自己的重點）：

回報在指定數據存儲的值在 的第一元素一組匹配的元素。

修復它是簡單地使用$(this).data("img")（這你已經對檢查）的一種方式：

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

Updated Fiddle

Answer 2

你可以得到的屬性和顯示根據對此。嘗試以下code.here更新小提琴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" 
 
    }); 
 
\t var attr=$(this).attr('data-img'); 
 
    $('.animation[data-anim=' + attr + ']').css({ 
 
    "opacity": "1" 
 
\t }); 
 
}); 
 

 
animIcon.mouseleave(function() { 
 
\t $(".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>

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