縮短這個涉及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'); 
    }); 
});