Question

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

我正在使用jQuery＆＃34; .on＆＃34;函数来处理特定元素/选择器（.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");
        }
    });

你可以看到＆＃34; .custom-video-image＆＃34;有三个事件。但是，我想为此函数添加多个元素/选择器，但不是全局添加。例如，我不打算将这三个事件附加到其他元素/选择器，这将实现如下：

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

我希望实现的是将两个额外的元素/选择器应用于＆＃34; mouseover＆＃34;和＃34; mouseout＆＃34;事件。 以下代码仅用于说明目的 - 这就是我想要实现的目标 ：

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

同样，我知道最后一个代码示例不起作用，我只是想说明我想要在一个＆＃34; .on＆＃34;功能 - 如果可能的话。

最后，我知道我可以通过创建多个＆＃34; .on＆＃34;来实现这一目标。函数调用或其他各种方法，但我想看看是否可以使用此方法为＆＃34; .on＆＃34;中的特定事件指定其他元素/选择器。功能

非常感谢任何帮助，如果有一个替代解决方案来减少所需的代码行以达到相同的效果，我全都耳朵！只是尝试学习更有效和更有效的方法。

谢谢。

编辑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，您可以从中type和target确定事件。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

正如我的一条评论中所提到的，我将测试能够获得$（＆＃39; .selector-1，.selector-2，.selector-3）.on（{...并确定基于该元素触发了哪些事件。我设计了一个解决方案，但是，与switch语句或两个单独的＆＃34; .on＆＃34;事件相比，我不确定它是否会对性能或任何事情有所帮助。

以下是我提出的解决方案：

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

我正在做的是，正在运行一张支票，上面写着＆＃34;如果选择器 - ＆＃39; x＆＃39;＆＃34;所有三个活动。

这已经过测试并且工作正常，但是想要了解哪种解决方案最适合性能/代码清晰度的任何可用输入。感谢。

Jquery＆＃34; .on＆＃34;功能 - 在.on数组中的特定事件上使用多个选择器/元素

2 个答案: