Jquery“.on”函数 - 在 .on 数组中的特定事件上使用多个 Selectors/Elements

Question

首先让我说，很抱歉标题的措辞令人困惑，我不确定如何陈述我的问题。

我正在使用 jQuery“.on”函数来处理特定 element/selector (.custom-video-image) 的三个事件，如下所示：

$('.custom-video-image').on({
        'click': function() {
            video = '<iframe src="'+ $(this).attr('data-video') +'"></iframe>';
            $(this).siblings('.custom-play').css('display', 'none');
            $(this).parent().toggleClass("image-wrapper video-wrapper");
            $(this).replaceWith(video);
        },
        'mouseover': function() {
            $(this).siblings('.custom-play').attr("src","images/youtube-play-color.png");
        },
        'mouseout': function() {
            $(this).siblings('.custom-play').attr("src","images/youtube-play-dark-trans.png");
        }
    });

如您所见，“.custom-video-image”有三个事件。但是，我想向这个函数添加多个 elements/selectors 但不是全局的。例如，我不想将这三个事件附加到附加的 elements/selectors，这将像这样实现：

$('.custom-video-image, .selector-2, .selector-3').on({
        'click': function() {
            video = '<iframe src="'+ $(this).attr('data-video') +'"></iframe>';
            $(this).siblings('.custom-play').css('display', 'none');
            $(this).parent().toggleClass("image-wrapper video-wrapper");
            $(this).replaceWith(video);
        },
        'mouseover': function() {
            $(this).siblings('.custom-play').attr("src","images/youtube-play-color.png");
        },
        'mouseout': function() {
            $(this).siblings('.custom-play').attr("src","images/youtube-play-dark-trans.png");
        }
    });

我想要实现的是将另外两个 elements/selectors 应用于 "mouseover" 和 "mouseout" 事件。 以下代码仅用于说明目的 - 这就是我想要实现的目标:

$('.custom-video-image').on({
        'click': function() {
            video = '<iframe src="'+ $(this).attr('data-video') +'"></iframe>';
            $(this).siblings('.custom-play').css('display', 'none');
            $(this).parent().toggleClass("image-wrapper video-wrapper");
            $(this).replaceWith(video);
        },
$('.custom-video-image, .selector-2, .selector-3').on({
        'mouseover': function() {
            $(this).siblings('.custom-play').attr("src","images/youtube-play-color.png");
        },
$('.custom-video-image, .selector-2, .selector-3').on({
        'mouseout': function() {
            $(this).siblings('.custom-play').attr("src","images/youtube-play-dark-trans.png");
        }
    });

同样，我知道最后一个代码示例不起作用，我只是想说明我试图在一个“.on”函数中实现什么——如果可能的话。

最后，我知道我可以通过创建多个“.on”函数调用或各种其他方法来实现这一点，但我想看看是否可以使用此方法为特定事件指定额外的 elements/selectors一个“.on”函数。

非常感谢任何帮助，如果有替代解决方案来减少所需的代码行数以达到相同的效果，我会洗耳恭听！只是想学习更有效和高效的方法。

谢谢。

编辑 1：如果没有替代解决方案，我将采用以下解决方案（我愿意接受任何改进以下代码的建议）：

$('.custom-video-image').on({
        'click': function () {
            video = '<iframe src="' + $(this).attr('data-video') + '"></iframe>';
            $(this).siblings('.custom-play').css('display', 'none');
            $(this).parent().toggleClass("image-wrapper video-wrapper");
            $(this).replaceWith(video);
        }
    });

$('.custom-video-image, .custom-play, .banner-overlay__copy').on({
        'mouseover': function() {
            $(this).siblings('.custom-play').attr("src","images/youtube-play-color.png");
        },
        'mouseout': function() {
            $(this).siblings('.custom-play').attr("src","images/youtube-play-dark-trans.png");
        }
    });

Answer 1

可以使用单个事件处理程序并根据事件类型和目标执行条件操作。请注意 on() passes your handler an Event object, from which you can determine the event's type and target.

在下面的示例中，我使用 switch 语句来定义各种条件下的操作。

我认为这对具有复杂逻辑或动态功能的处理程序很有用。除了这些好处，单独调用 on() 可以说更具可读性和更易于维护。

$('.s1,.s2,.s3').on('click mouseover mouseout', function(e) {
  
  var $eventTarget = $(e.target),
      eventType = e.type;

  switch (true) {

    case $eventTarget.hasClass('s1') && eventType == 'click':
      $eventTarget.toggleClass('red');
      break;
      
    case $eventTarget.hasClass('s2') && $.inArray(eventType,['mouseover','mouseout'])>=0:
      $eventTarget.toggleClass('green');
      break;
      
    case $eventTarget.hasClass('s3') && $.inArray(eventType,['mouseover','mouseout'])>=0:
      $eventTarget.toggleClass('blue');
      break;
      
    default:
      
  }

});

.red { background-color: red;}
.green { background-color: lightgreen;}
.blue { background-color: lightblue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="s1">ELEMENT 1</div>
<div class="s2">ELEMENT 2</div>
<div class="s3">ELEMENT 3</div>

Answer 2

正如我的一条评论中提到的，我打算测试让 $('.selector-1, .selector-2, .selector-3).on({... 并确定哪个基于元素触发的事件。我设计了一个解决方案，但是，与两个 switch 语句或两个单独的“.on”事件相比，我不确定它是否会对性能或任何其他方面有好处。

这是我想出的解决方案：

$('.custom-video-image, .custom-play, .banner-overlay__copy').on({
        'click': function() {
            if($(this).is('.custom-play, .custom-video-image')) {
                video = '<iframe src="'+ $(this).attr('data-video') +'"></iframe>';
                $(this).siblings('.custom-play').css('display', 'none');
                $(this).parent().toggleClass("image-wrapper video-wrapper");
                $(this).replaceWith(video);
            }
        },
        'mouseover': function() {
            if($(this).is('.custom-play')) {
                $(this).attr("src","images/youtube-play-color.png");
            } else {
                $(this).siblings('.custom-play').attr("src","images/youtube-play-color.png");
            }
        },
        'mouseout': function() {
            if($(this).is('.custom-play')) {
                $(this).attr("src","images/youtube-play-dark-trans.png");
            } else {
                $(this).siblings('.custom-play').attr("src","images/youtube-play-dark-trans.png");
            }
        }
    });

我所做的只是运行一张支票，上面写着 "if selector-'x'" 所有三个事件。

这已经过测试并且工作正常，但希望任何可用的输入，以了解哪种解决方案最适合 performance/code 清晰度。谢谢

Jquery“.on”函数 - 在 .on 数组中的特定事件上使用多个 Selectors/Elements

Jquery ".on" Function - Using Multiple Selectors/Elements on Specific Events in an .on Array

jquery

jquery-events