如何在 mouseenter 事件后定位特定元素？

Question

我有这个 JS：

$(".play").mouseenter(function() {

    $( ".glitch-img" ).mgGlitch({
        // set 'true' to stop the plugin
        destroy : false, 
        // set 'false' to stop glitching
        glitch: true, 
        // set 'false' to stop scaling
        scale: true, 
        // set 'false' to stop glitch blending
        blend : true, 
        // select blend mode type
        blendModeType : 'hue',
        // set min time for glitch 1 elem
        glitch1TimeMin : 200, 
        // set max time for glitch 1 elem
        glitch1TimeMax : 400,
        // set min time for glitch 2 elem
        glitch2TimeMin : 10, 
        // set max time for glitch 2 elem
        glitch2TimeMax : 100, 
    });

}).mouseleave(function() {

    $( ".glitch-img" ).mgGlitch({
        destroy : true, // set 'true' to stop the plugin
    });

});

而我的HTML是这样的：

<div>
    <figure>
        <div class="glitch-img" style="background-image: url('assets/images/image.jpg')"></div>
    </figure>
</div>
<div>
    <div class="play play1"></div>
</div>

我不知道如何让我的 mouseenter 只在当前 .play-元素上工作而不影响所有其他 .play-元素。

Answer 1

如果我没看错，您实际上想要定位 .glitch-img-元素，您可以像下面所示那样定位（我还重构了您的代码）：

handleGlitch = function( oEvent )
{
  // build the right configuration based on mouseenter/mouseleave
  oGlitch = oEvent.handleObj.origType == 'mouseleave'
  ? { destroy       : true } // config for "mouseleave"
  : { destroy       : false, // config for "mouseenter"
      glitch        : true, 
      scale         : true, 
      blend         : true, 
      blendModeType : 'hue',
      glitch1TimeMin: 200, 
      glitch1TimeMax: 400,
      glitch2TimeMin: 10, 
      glitch2TimeMax: 100 };

  // lets first get the element that triggered the event which is "div.play"
  // oEvent.target is the dom element on which the mouseenter/mouseleave event was fired
  $Play = $( oEvent.target ); // you can now do eg: $Play.addClass('active')|$Play.removeClass('active')

  // so now we have to target the right "div.glitch-img"
  // and not every "div.glitch-img" like it was before
  $Play
    .parent()            // get parent element of "div.play"
    .prev()              // get the previous element of that parent
    .find('.glitch-img') // now find the element with class "glitch-img"
    .mgGlitch( oGlitch ) // and do your glitchi stuff
}

// attache event handlers
// event object will be passed as an argument to handleGlitch function
$(".play").mouseenter( handleGlitch ).mouseleave( handleGlitch );

<div>
  <figure>
    <div class="glitch-img" style="background-image: url('assets/images/image.jpg')"></div>
  </figure>
</div>
<div>
  <div class="play play1"></div>
</div>

<div>
  <figure>
    <div class="glitch-img" style="background-image: url('assets/images/image.jpg')"></div>
  </figure>
</div>
<div>
  <div class="play play2"></div>
</div>

Edit/Recommendation

如果可以，我强烈建议重构您的标记。虽然我的回答可能会帮助您解决当前的问题

$( oEvent.target ).parent().prev().find('.glitch-img')

部分可能会在您仅更改当前标记上的一个小问题时立即失败，因为它强烈依赖于标记的结构，这通常是一种不好的做法。所以我会做类似的事情：

<div>
  <figure><!-- note the add of the id "glitch-1" which correspondents to "play-1" -->
    <div id="glitch-1" class="glitch-img" style="background-image: url('assets/images/image.jpg')"></div>
  </figure>
</div>
<div><!-- note the add of the id "play-1" which correspondents to "glitch-1" -->
  <div id="play-1" class="play"></div>
</div>

<div>
  <figure><!-- note the add of the id "glitch-2" which correspondents to "play-2" -->
    <div id="glitch-2" class="glitch-img" style="background-image: url('assets/images/image.jpg')"></div>
  </figure>
</div>
<div><!-- note the add of the id "play-2" which correspondents to "glitch-2" -->
  <div id="play-2" class="play"></div>
</div>

现在您的标记结构独立于 #play-[nr] 与 #glitch-[nr] 的关系，只要您保持模式即可。

handleGlitch = function( oEvent )
{
  // now you can target your elements much more reliable and also more efficiently
  // lets get the number out of our "div.play" elment by its id
  sId = oEvent.target.id                   // eg: "play-1", "play-2"
  sNr = sId.substr( 1 + sId.indexOf('-') ) // eg: "1", "2"

  // now its easy to target the glitch element with vanilla JS
  document.getElementById( 'glitch-' + sNr )
  // but while you want to do some jQuery-mgGlitch-stuff you can do so by
  $( '#glitch-' + sNr ).mgGlitch( oGlitch )
}

$(".play").mouseenter( handleGlitch ).mouseleave( handleGlitch );

或者换句话说：您现在可以随意更改标记，而无需再触及 JavaScript 部分，这是一件非常好的事情。不是吗？

Answer 2

您可以使用 $(this) 来识别当前活动的 $(".play") 元素。像这样：

$(".play").mouseenter(function() {
    $(this).css("background","black")  // or whatever you want to do with it
    $(".glitch-img").mgGlitch({
    ...
    });

$(".play").mouseleave(function() {
    $(this).css("background","white")  // or whatever you want to do with it
    $(".glitch-img").mgGlitch({
    ...
    });

如何在 mouseenter 事件后定位特定元素？

How to target specific elements after mouseenter event?

javascript

jquery

event-handling

mouseenter

mouseleave