Как сделать эту работу js более чем одним элементом?

Question

У меня есть множество изображений, которые мне нужны для работы с js. Он отлично работает с одним, но когда я добавляю второе изображение и текст, если я нахожусь над этим или первым изображением, он вызывает отображение текста на обоих (их собственный текст, но слайд появляется). Могу ли я изменить этот js, чтобы он работал для многочисленных изображений/текста? Спасибо.

JS:

//var yt_height = $('.youtube').height(); 
var adjust = 45; 
var yt_height = $('.youtube').height() - adjust; 
var top  = yt_height - $('.yt-desc').height()+20; 
$('.yt-desc').css({ top: yt_height + 'px' }); 
$(".youtube").hover(
    function() { $('.yt-desc').animate({ top: top + 'px'  }, 'slow') }, 
    function() { $('.yt-desc').animate({ top: yt_height + 'px' }, 'slow') } 
); 

HTML:

<div class="youtube" style="margin-right: 30px"> 
    <img src="/images/test1.jpg"> 
    <div class="yt-desc"> 
     <span style="font-weight: bold; font-size: 14px">Web Mapping Applications</span><br /><br /> 
      <span style="font-size: 12px">Pellentesque habitant morbi tristique senectus et 
      netus et malesuada fames ac turpis egestas.fjdslfkj. Eelrjklej slk slekrje lskf dk jsldfk d</span> 
     </p> 
    </div> 
</div> 

<div class="youtube"> 
    <img src="/images/test2.jpg"> 
    <div class="yt-desc"> 
     <span style="font-weight: bold; font-size: 14px">Law Enforcement</span><br /><br /> 
      <span style="font-size: 12px">Pellentesque habitant morbi tristique senectus et 
      netus et malesuada fames ac turpis egestas.fjdslfkj. Eelrjklej slk slekrje lskf dk jsldfk d</span> 
     </p> 
    </div> 
</div> 

CSS:

.youtube { 
    background: #ccc; 
    float: left; 
    position: relative; 
    width: 310px; 
height: 217px; 
    overflow: hidden; 
border-top-left-radius: 10px; 
border-top-right-radius: 10px; 
border: 1px solid #ccc; 
} 

.youtube .yt-desc { 
    position: absolute; 
    color: #000; 
    left: 0px; 
    background: #ccc; 
width: 300px; 
padding-left: 10px; 
padding-top: 17px; 
padding-bottom: 20px; 
line-height: 18px; 
} 

Answer 1

Заменить $('.yt-desc').animate на $(this).children('.yt-desc').animate в вашем парения обратного вызова. В случае обратных вызовов, this всегда является целевым элементом.

В противном случае он будет анимировать все элементы документа, имеющие класс yt-desc, то есть оба слайда.

Answer 2

вы пытались с помощью этого объема в вашей функции парении:

(function ($) { 

    Drupal.behaviors.exampleBehavior = { 
    attach: function (context, settings) {  
     //var yt_height = $('.youtube').height(); 
     var adjust = 45; 
     var yt_height = $('.youtube').height() - adjust; 
     var top = yt_height - $('.yt-desc').height()+20; 
     $('.yt-desc').css({ top: yt_height + 'px' }); 

     $(".youtube").hover(
       function() { $(this).find('.yt-desc').animate({ top: top + 'px'  }, 'slow') }, 
       function() { $(this).find('.yt-desc').animate({ top: yt_height + 'px' }, 'slow') } 
     ); 
    } 
    }; 
})(jQuery); 

поэтому при наведении, $ (это) ссылается .youtube, а затем она найдет свой ребенок .yt-desc