Показывается только первый элемент

Question

Я бы хотел показать img на событии mouseover над эскизом с помощью data-attr, но работает только первый миниатюра.

http://jsfiddle.net/3gn0kj1k/ DEMO

Я пробовал много вещей, но без успеха поэтому я здесь.

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