I want to write a JavaScript function and invoke it on a this object in this way:
<div id= 'MyDiv'>screamer</div>
function scream()
{
if(this.hasClass("scream")) {
alert("scream");
}
else {
alert("shhhh");
}
}
$(function () {
$('#MyDiv").scream();
}
Here is the jsfiddle: http://jsfiddle.net/JtN9W/
What am I doing wrong?
scream is a global, so it is a property of the window object and not the jQuery object that you've created.
If you want to attach it to every jQuery instance then you need to assign it to $.fn.something
function scream() {
//etc
}
$.fn.scream = scream;
Like this:
jQuery.fn.scream = function() {
if(this.hasClass("scream")) {
alert("scream");
} else {
alert("shhhh");
}
}
$(function () {
$('#MyDiv').scream();
});
jsfiddle: http://jsfiddle.net/JtN9W/2/.
In your code there are more error:
The function scream you can't call with jquery using $('#MyDiv").scream();
I change this in
$(function () {
scream($("#MyDiv"));});
And I don't know how to use this call $('#MyDiv").scream(); and I change your code passing the div
You have to make your own object, follow jQuery api manual: http://learn.jquery.com/plugins/
Solution for you:
(function ( $ )
{
$.fn.scream = function()
{
var c = $(this);
if(c.hasClass("scream")) {
alert("scream");
}
else {
alert("shhhh");
}
return this;
};
}( jQuery ));
$(function () {
$('#scream').scream();
});
HTML markup:
<div id="scream" class="screaam"></div>
Working example: http://jsfiddle.net/qPgA9/
Cheers!
$('#MyDiv").