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

您是否尝试在函数悬停中使用 this 范围：

(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);

所以当你悬停时， $（this）指的是 .youtube ，然后它会找到它的孩子 .yt-desc

如何使这个js适用于多个项目？

2 个答案: