Как настроить таргетинг на определенные элементы после события мыши? - PullRequest
Новая
       74

Как настроить таргетинг на определенные элементы после события мыши?

2 голосов
/ 08 марта 2019

У меня есть этот 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 -элементы.

Ответы [ 2 ]

1 голос
/ 08 марта 2019

Вы можете использовать $(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({
    ...
    });
1 голос
/ 08 марта 2019

Если я вас правильно понял, вы на самом деле хотите нацелиться на элемент .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>

Редактировать / рекомендация

Если вы в состоянии, я настоятельно рекомендую реорганизовать вашу разметку. Хотя мой ответ может помочь вам с вашей текущей проблемой, 

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

part, вероятно, потерпит неудачу, как только вы просто измените небольшую часть текущей разметки, так как она сильно зависит от структуры разметки, что в целом является плохой практикой. Поэтому я бы сделал что-то вроде: 

<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 , что очень хорошо. Не так ли?

...