Jquery " .on“函数--对.on数组中的特定事件使用多个选择器/元素

Question

首先，我要说，对不起，标题的措辞令人困惑，我不知道该如何陈述我的问题。

我使用jQuery ".on“函数来处理特定元素/选择器(.定制-视频-映像)的三个事件，如下所示：

$('.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, .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");
        }
    });

我希望实现的是将两个额外的元素/选择器应用于"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“函数调用或其他各种方法来实现这一点，但我想看看是否可以使用此方法为".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

正如我的一个注释中提到的，我打算测试是否有$(‘..selector 1，..selector 2，..selector 3).on({.并根据元素确定触发的事件。然而，我设计了一个解决方案，但是，与开关语句或两个单独的".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");
            }
        }
    });

我所做的就是为所有三个事件运行一个检查，上面写着“如果选择器-‘x’”。

这是经过测试和工作良好，但希望任何可用的输入，哪个解决方案将是最好的性能/代码清晰度。谢谢。

Answer 2

可以使用单个事件处理程序并根据事件类型和目标执行条件操作。注意，可以从传递处理程序事件对象确定事件的类型和目标。

在下面的示例中，我使用一个交换机语句来定义各种条件下的操作。

我可以看到这对于具有复杂逻辑或动态功能的处理程序很有用。撇开这些好处不说，对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>

​