缩短这个涉及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

您可以使用类和一个单一的点击/鼠标离开处理

<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删除类的类canvas添加到所有的div元素。

Answer 2

不知道这帮助或没有，但你可以使用下面的代码简化代码，先试试这个：

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