Question

我有一张图像可以在悬停时改变z-Index并播放一些声音：

<div class="portraitPanel">
    <img src="staticImage.jpg" class="saticImg">
    <img src="staticImage.gif" class="movingImg">
    <audio src="audio.mp3"></audio>
</div>

那是jQuery

$(document).ready(function() {
  $(".portraitPanel").hover(function(){
    $(".movingImg").css('z-index', 3000);
    $('audio')[0].play(); 
  });
  $(".portraitPanel").mouseout(function(){
    $(".movingImg").css('z-index', 0);
    $('audio')[0].stop(); 
  });
});

好的，现在我开始或多或少地开始工作了。但我有这个div的多个实例。我如何只在每个div上应用jQuery代码。现在，如果我将鼠标悬停在一个div上，页面上的每个音频都会播放（是的，听起来很可爱）。我试图摆弄this，但我无法让它发挥作用。任何提示？

这是jsFiddle

Answer 1

使用context仅搜索parent内的元素。 hover有两个回调。一个用于hover-in，另一个用于hover-out。您不需要注册额外的mouseout事件监听器。

$(function() {
    $(".portraitPanel").hover(function() {
        var parent = $(this);
        $(".movingImg", parent).css('z-index', 3000);
        $('audio', parent)[0].play();
    }, function() {
        var parent = $(this);
        $(".movingImg", parent).css('z-index', 0);
        $('audio', parent)[0].stop();
    });
});

Answer 2

＆＃13;

$(document).ready(function() {
  $(".portraitPanel").hover(function() {
    $(".movingImg", this).addClass('red') //use this context to check which element gets the event
    //$(".movingImg", this).css('z-index', 3000);
    //$('audio', this)[0].play();
  });
  $(".portraitPanel").mouseout(function() {
    $(".movingImg", this).removeClass('red') //use this context to check which element gets the event
    //$(".movingImg", this).css('z-index', 0);
    //$('audio', this)[0].stop();
  });
});

＆＃13;

.red {
  border: 1px solid red
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="portraitPanel">
  <img src="staticImage.jpg" class="saticImg">
  <img src="staticImage.gif" class="movingImg">
  <audio src="audio.mp3"></audio>
</div>
That's the jQuery

<div class="portraitPanel">
  <img src="staticImage.jpg" class="saticImg">
  <img src="staticImage.gif" class="movingImg">
  <audio src="audio.mp3"></audio>
</div>

＆＃13;

使用this上下文

Answer 3

<强> JSFiddle

使用$('.selector', context)附加活动
使用<audio>指定选择器的上下文
悬停时缓存当前var currentAudio; $(document).ready(function() { $(".portraitPanel").on('mouseenter', function(){ $(".movingImg", this).css('z-index', 3000); currentAudio = $('audio', this)[0]; currentAudio.play(); }).on('mouseleave', function(){ $(".movingImg", this).css('z-index', 0); currentAudio.pause(); }); });，以便在mouseleave上暂停

＆＃13;

.portraitPanel {
  width: 100px;
  height: 100px;
  position: relative;
}
.portraitPanel .saticImg {
  z-index: 10;
  position: relative;
  width: 100%;
}
.portraitPanel .movingImg {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="portraitPanel">
    <img src="http://placehold.it/100x100" class="saticImg">
    <img src="http://i.giphy.com/GvUb9lnnnsjYY.gif" class="movingImg">
    <audio src="http://a.tumblr.com/tumblr_ly8ox6tsxV1rnkkvko1.mp3"></audio>
</div>

<div class="portraitPanel">
    <img src="http://placehold.it/100x100/123" class="saticImg">
    <img src="http://i.giphy.com/GvUb9lnnnsjYY.gif" class="movingImg">
    <audio src="http://a.tumblr.com/tumblr_ly8ox6tsxV1rnkkvko1.mp3"></audio>
</div>

<div class="portraitPanel">
    <img src="http://placehold.it/100x100/672" class="saticImg">
    <img src="http://i.giphy.com/GvUb9lnnnsjYY.gif" class="movingImg">
    <audio src="http://a.tumblr.com/tumblr_ly8ox6tsxV1rnkkvko1.mp3"></audio>
</div>

＆＃13;

var myrouting=angular.module('routingDemoApp', ['ui.router'])
myrouting.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise("", "/index")

$stateProvider
        .state('index', {
            url: "/index",
            templateUrl: "../Views/home.html"
        })
        .state('contactus', {
            url: "/contactus",
            templateUrl: "../Views/contactus.html",

        })

         .state('home', {
             url: "/home",
             templateUrl: "../Views/home.html",
         })
         .state('myModal', {
             url: "/myModal",
             templateUrl: "../Views/SignInPage.html",
         })

}]);

＆＃13;

在悬停时更改每个元素

3 个答案: