Link to home
Start Free TrialLog in
Avatar of APD Toronto
APD TorontoFlag for Canada

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
<!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>

Open in new window


main.js
$(function() {

	$('#button').on('click', function(){
		$('body').drakeify();
		$(this).hide();
	});

	

});

Open in new window


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

Open in new window


Thank you,
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial