縮短涉及onClick，addClass和removeClass的此jquery代碼

Question

我最近在這里找到了一些對我來說很好的代碼，但是我需要3個實例，我想知道如何縮短它。 我嘗試使用此功能並找到iframe，但這對我不起作用

<div id="canvas1" class="flex-map">
    <iframe id="map_canvas1" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2988.340069842146!2d-81.6936185!3d41.496904799999996!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8830f07f1ec04a5b%3A0x13f658e62ff00665!2s230+W+Huron+Rd%2C+Cleveland%2C+OH+44113!5e0!3m2!1sen!2sus!4v1427256282821" width="400" height="300" frameborder="0" style="border:0"></iframe>
</div>
<div id="canvas2" class="flex-map">
    <iframe id="map_canvas2" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2988.340069842146!2d-81.6936185!3d41.496904799999996!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8830f07f1ec04a5b%3A0x13f658e62ff00665!2s230+W+Huron+Rd%2C+Cleveland%2C+OH+44113!5e0!3m2!1sen!2sus!4v1427256282821" width="400" height="300" frameborder="0" style="border:0"></iframe>
</div>
<div id="canvas3" class="flex-map">
    <iframe id="map_canvas3" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2988.340069842146!2d-81.6936185!3d41.496904799999996!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8830f07f1ec04a5b%3A0x13f658e62ff00665!2s230+W+Huron+Rd%2C+Cleveland%2C+OH+44113!5e0!3m2!1sen!2sus!4v1427256282821" width="400" height="300" frameborder="0" style="border:0"></iframe>
</div>

$(document).ready(function () { 

    $('#map_canvas1').addClass('scrolloff');
    $('#canvas1').on('click', function () {
        $('#map_canvas1').removeClass('scrolloff');
    });
    $("#map_canvas1").mouseleave(function () {
        $('#map_canvas1').addClass('scrolloff');
    });
});

Answer 1

不確定是否有此幫助，但是您可以使用以下代碼簡化代碼，請首先嘗試以下方法：

$(document).ready(function () { 

  $('#map_canvas1, #map_canvas2, #map_canvas3').addClass('scrolloff');

  $(document).on('click','#canvas1, #canvas2, #canvas3', function () {
    $(this).find('iframe').removeClass('scrolloff');
  });

  $("#map_canvas1, #map_canvas2, #map_canvas3").mouseleave(function () {
    $(this).addClass('scrolloff');
  });
});

Answer 2

您可以使用類和單擊/ ouseleave處理程序

<div id="canvas1" class="flex-map canvas">
    <iframe id="map_canvas1" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2988.340069842146!2d-81.6936185!3d41.496904799999996!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8830f07f1ec04a5b%3A0x13f658e62ff00665!2s230+W+Huron+Rd%2C+Cleveland%2C+OH+44113!5e0!3m2!1sen!2sus!4v1427256282821" width="400" height="300" frameborder="0" style="border:0"></iframe>
</div>

然后

$(document).ready(function () {
    $('.canvas iframe').addClass('scrolloff').mouseleave(function () {
        $(this).addClass('scrolloff');
    });
    $('.canvas').click('click', function (e) {
        $(this).find('iframe').removeClass('scrolloff');
    });
});

演示： 小提琴

從既然你想添加/刪除類iframe畫布里面添加一個類canvas的所有div元素。