0

Hello,
today I decided to look into jquery plugins, and with the help of various tutorials I have produce a very simple one that changes the colour of some elements in a page. I would appreciate some help in understanding whether there is something else that I need to do to make it bullet proof (I am sure this plug in in itself is completely useless but it was a good exercise for me to understand how the whole plugin world works).
So here is the HTML first:

<div class="divContainer">
<p>Changing colour plugin</p>
<div class="square">Square 1</div>
<div class="square">Square 2</div>
<div class="square">Square 3</div>
<div class="square">Square 4</div>
<div class="square">Square 5</div>
<div class="square">Square 6</div>
<div class="square">Square 7</div>
<div class="square">Square 8</div>
<button class="changeColour">change colour</button>
</div>

Then the CSS:

.divContainer{
    width:600px;
    height:300px;
    background-color:grey;
    position:absolute;
    top:450px;
}
.square{
    background-color:red;
    width:50px;
    height:50px;
    margin-right:10px;
    float:left;
}

And the script:

$(".changeColour").click(function(){
$(".square").colourThem({
background: 'yellow',
color: 'red'
});
});


/*plugin with options*/
(function($){
$.fn.colourThem = function( options ){
//declare defaults
var defaults = {
background:'green',
color:'white'
}
var settings = $.extend({}, defaults, options );//new object merging defaults and options

this.css({ "backgroundColor": settings.background, 
"color": settings.color
});
return this;
}
}(jQuery));

So, in one of the tutorials (this one is brilliant by the way http://net.tutsplus.com/articles/news/you-still-cant-create-a-jquery-plugin/) I have read that when we build plug-ins since we return an object that contains many elements we need to cycle through them with this.each(function() { }.
In my case I have added that to have this

(function($){
$.fn.colourThem = function( options ){
//declare defaults
var defaults = {
background:'green',
color:'white'
}
var settings = $.extend({}, defaults, options );
this.each(function() {  
this.css({ "backgroundColor": settings.background, 
            "color": settings.color
});
}
return this;
}
}(jQuery));

but this breaks my plug-in. What have I done wrong?
thanks

Edited by Violet_82

3
Contributors
5
Replies
31
Views
3 Years
Discussion Span
Last Post by Violet_82
0

I'm pretty new to the whole plugin thing as well, but I am guessing that pixelsoul is indicating you dont need the .each() because if you look carefully at the code, you are already "targetting" all of the div elements with a class name of "square". Therefore, you dont have to loop through each of them.

0

Thanks for the demonstration pixelsoul.
I think I know why it didn't work when I did it. Basically I have used this. as opposed to $(this) so I was cycling through the object as opposed to the elements.
Anyway, you guys say I don't need the .each() in this case, which brings me to the next question: when is it that I need it, why would/would I not need it?

0

Hi thanks, yes I did JorgeM and it's kind of clear how to use it, but I thought that in the context of a plugin it was somehow different, that's why I asked :-)

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.