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

您可以使用类和单击/鼠标处理程序

<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');
    });
});

演示：Fiddle

由于您想要从画布内的iframe添加/删除类，所以为所有div元素添加一个类canvas。

缩短这个涉及onClick，addClass和removeClass的jquery代码

2 个答案: