Jquery function as object

Question 1

I have created a javascript function like the following:

function highlight_input() {
 $("input").css("background", "yellow");
}
$("#input1").highlight_input();
$("#input2").highlight_input();

Now I want to highlight the two input types when need! but both should not be highlighted at a time!

Question 2

Please explain what you're trying to do more clearly. What do you mean "when you need"?

Question 3

You can create a basic plugin by adding function to jQuery.fn(extending jQuery prototype), where this refers to the jQuery object inside the function.

jQuery.fn.highlight_input = function() {
 // here this refers to the jQuery object , so 
 // you can apply jQuery methods without wrapping
 this.css("background", "yellow");
 // return the object reference to keep chaining
 return this;
}
$("#input1").highlight_input();
$("#input2").highlight_input();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input1">
<input id="input2">
<input>

Even you can pass the color as an argument in case you want to apply custom color in some case.

jQuery.fn.highlight_input = function(color) {
 // if argument is undefined use the default value
 // although you can return in the same line since 
 // css method returns the object reference
 return this.css("background", color || "yellow");
}
$("#input1").highlight_input();
// passing color as argument
$("#input2").highlight_input("red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input1">
<input id="input2">
<input>

Question 4

You are on the right path but not the right way. read this and adapt your answer. api.jquery.com/jquery.fn.extend

Question 5

Also, keep in mind that doing a jq selector may return you and array of objects.

Question 6

@DincaAdrian : extend is using to add multiple properties.... which provides the same behaviour

Question 7

@DincaAdrian : jQuery selector returns an array like object and not an array.... by index we can retrieve DOM object... to get jQuery object we can use eq() method.....

Question 8

jQuery plugins will do the job

$.fn.highlight_input = function(){
 return this.css({background:"yellow"});
}

you can additionally pass a desired color argument (that will fallback to yellow

$.fn.highlight_input = function(color) {
 return this.css({background: color||"yellow"});
}

use like

$("selector").highlight_input("#f80");

Pranav C Balan 115k25 gold badges173 silver badges195 bronze badges · Accepted Answer · 2017-02-09 07:20:44Z

You can create a basic plugin by adding function to jQuery.fn(extending jQuery prototype), where this refers to the jQuery object inside the function.

jQuery.fn.highlight_input = function() {
 // here this refers to the jQuery object , so 
 // you can apply jQuery methods without wrapping
 this.css("background", "yellow");
 // return the object reference to keep chaining
 return this;
}
$("#input1").highlight_input();
$("#input2").highlight_input();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input1">
<input id="input2">
<input>

Even you can pass the color as an argument in case you want to apply custom color in some case.

jQuery.fn.highlight_input = function(color) {
 // if argument is undefined use the default value
 // although you can return in the same line since 
 // css method returns the object reference
 return this.css("background", color || "yellow");
}
$("#input1").highlight_input();
// passing color as argument
$("#input2").highlight_input("red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input1">
<input id="input2">
<input>

You are on the right path but not the right way. read this and adapt your answer. api.jquery.com/jquery.fn.extend
Also, keep in mind that doing a jq selector may return you and array of objects.
@DincaAdrian : extend is using to add multiple properties.... which provides the same behaviour
@DincaAdrian : jQuery selector returns an array like object and not an array.... by index we can retrieve DOM object... to get jQuery object we can use eq() method.....

CollectivesTM on Stack Overflow

Jquery function as object

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

CollectivesTM on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related