APD Toronto
asked on
JS Plugin Chaining
Hi Experts,
I am taking a JS course and we are doing plugins. But I cannot understand why the instructor is using the $('body') selector in both main.js (line 4) and drakeify.js (line 8).
In this case since main.js is calling drakeify(), then I would assume that line 4 is saying to apply it to that selector (the body), but then you would need to use that as parameter in drakeify.js? I could never get an answer for this from my instructor.
index.html
main.js
drakeify.js
Thank you,
I am taking a JS course and we are doing plugins. But I cannot understand why the instructor is using the $('body') selector in both main.js (line 4) and drakeify.js (line 8).
In this case since main.js is calling drakeify(), then I would assume that line 4 is saying to apply it to that selector (the body), but then you would need to use that as parameter in drakeify.js? I could never get an answer for this from my instructor.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drakeify jQuery Plugin</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<a href="#" id="button">Drake Me</a>
<script
src="http://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="js/drakeify.js"></script>
<script src="js/main.js"></script>
</body>
</html>
main.js
$(function() {
$('#button').on('click', function(){
$('body').drakeify();
$(this).hide();
});
});
drakeify.js
$.fn.drakeify = function(){
var drakeImages = ['img/drake1.png', 'img/drake2.png', 'img/drake3.png', 'img/drake4.png'];
for (var i = 0; i < drakeImages.length; i++){
var drake ='<div class="drake"><div class="drake' + i + '"><img src="' + drakeImages[i] + '"></div></div>';
$('body').append(drake);
}
return this;
}
Thank you,
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.