var regfbnaam = $('#regfbnaam');
$('#regnaam').focusin({param1: regfbnaam},removeClass);
function removeClass(e)
{
param1.removeClass('hidden');
}
Error in console.log: param1 is nog defined. Means he doesn't get the value of my param1. What am i doing wrong here?
(trying to get a variable with a onclick event to my function)
Try this (tested)
function removeClass(e) {
var param1 = e.data.param1;
param1.removeClass('hidden');
}
jQuery(document).ready(function($) {
var regfbnaam = $('#regfbnaam');
$('#regnaam').focusin({param1: regfbnaam},removeClass);
});
Reference:
event.data
.focusin()
Try:
function removeClass(e)
{
$(e.data.param1).removeClass('hidden');
}
Not exactly sure what you trying to do with that syntax. I would suggest a different approach:
var $el = $(el);
$el.on('focusin', function(){
removeClass(e, {param1: regfbnaam});
});
function removeClass(e, params)
{
params.param1.removeClass('hidden');
}
Untested, but I think it should work. Basically the idea is that you are binding a function to the element and then providing it with whatever arguments it needs.
Related
I'm new to jQuery and I know this is probably super easy. I wanna get the returned value from a callback function in an event. Code is here:
$('.hintItem').on('mouseenter', function(e){
changeItemStyle(e);
var hintItemIndex = $(this).index();
return hintItemIndex;
});
I want to grab the value of hintItemIndex and store it to a new variable. Could anyone kindly help me?
Try this:
var hintItemIndex;
$('.hintItem').on('mouseenter', function(e){
changeItemStyle(e);
hintItemIndex = $(this).index();
});
Basically, you define a variable outside the fuction and assign a value to it via the function.
Try following function.
function getHintItemIndex() {
var retVal;
$('.hintItem').on('mouseenter', function(e){
changeItemStyle(e);
var hintItemIndex = $(this).index();
return hintItemIndex;
});
return retval;
}
var retVal = getHintItemIndex();
I have 2 different event on different classes :
$('.box1').click(function(){
$(this).find('something').css('red')
}
$('#otherId .box2').change(function(){
$(this).find('something').css('red')
}
But I plan to split them out to a function to avoid duplicate code
function getDetails(this){
this.find(".something").css('red');
}
but how to call the function later? pass the $(this) to the function?
$('#otherId .box2').change(function(){
getDetails($(this))
}
this is a keyword so it can't be a param name
function getDetails(el) {
el.find(".something").css('red');
}
$('#otherId .box2').change(function () {
getDetails($(this))
})
The keyword this can't be used as an argument, but you can keep using this within the function body:
function getDetails()
{
$(this).find(".something").css('red');
}
And then call it like so:
$('#otherId .box2').change(function() {
getDetails.call(this);
}
See also: Function.call()
You can use something like this to pass it through if you want to get an inputs value then change it and output the final value next to it:
var finalOutput;
function getDetails(args) {
args = "Hello World";
return args;
}
$('.box2').change(function(){
var inputValue = $(this).val();
finalOutput = getDetails(inputValue);
$('.box2').after('<b>' + finalOutput + '</b>');
});
Here is a working example:
http://jsfiddle.net/La4v9mL0/
Hey guys am new to javascript development.I have been working on objects with javascript.When i reffered and tried a code with javascript object i found an error with it ..The code is
var and = { models:"AN",
collection:{},
name: function() { var babe = 5; return babe; }
}
When i called the code with and.name( { name:"george",age:20} ); it gives me output as 5.
But when i called like and.name.age it shows me undefined instead of 20.
Since am new to javasscript i didnt get what am doing wrong ..Hope you guys can help me out ..Thanks in advance
Try this might be helpful for you.
var obj = { models:"AN",
collection:{},
person:{},
changeDetails: function(values) {
obj.person.name = values.name;
obj.person.age = values.age;
}
};
obj.changeDetails({name:"George",age:20});
console.log(obj.person);
Your name attribute is a function, not an object that contains a "age" attribute...
Calling a function will return you the value setted in the return statement.
Calling an attribute by its name will give you its value.
I would advise you to try a tutorial about the basics of javascript to understand the differences...
The problem is the mix between a function and an object:
var and = { models:"AN",
collection:{},
name: function() { var babe = 5; return babe; }
}
and.name = { name:"george",age:20}
alert(and.name.age)
Try this in jsfiddle.
Here I change the function name with an object. Then I get the value you want.
Hope it helps.
Not sure how I could search for these type of question/answer...
This is what I am trying to do...
(function($){
$.fn.helloworld = {
want: function () {
alert("I want" + this + "!");
}
};
})(jQuery);
Now when I call the function this way, and try to retrieve this, it will only give me the helloworld "object".
$("#test").helloworld.want();
Is there a way to access the caller element, #test, from within?
There's no "nice" way. You could do this:
var $test = $('#test');
$test.helloworld.want.call($test);
The problem is that by setting up the structure you've got you're essentially forcing the behavior you say you don't want.
What you could do instead is this:
$.fn.helloworld = function( action ) {
var actions = {
test: function() {
alert("Hi!");
},
// ...
};
if (actions[action])
return actions[action].apply(this, [].slice.call(arguments, 1));
return this;
};
Now you can call it:
$('#this').helloworld("test");
I know I could do this with closures (var self = this) if object was a function:
click here
<script type="text/javascript">
var object = {
y : 1,
handle_click : function (e) {
alert('handling click');
//want to access y here
return false;
},
load : function () {
document.getElementById('x').onclick = this.handle_click;
}
};
object.load();
</script>
The simplest way to bind the call to handle_click to the object it is defined in would be something like this:
var self=this;
document.getElementById('x').onclick =
function(e) { return self.handle_click(e) };
If you need to pass in parameters or want to make the code look cleaner (for instance, if you're setting up a lot of similar event handlers), you could use a currying technique to achieve the same:
bind : function(fn)
{
var self = this;
// copy arguments into local array
var args = Array.prototype.slice.call(arguments, 0);
// returned function replaces first argument with event arg,
// calls fn with composite arguments
return function(e) { args[0] = e; return fn.apply(self, args); };
},
...
document.getElementById('x').onclick = this.bind(this.handle_click,
"this parameter is passed to handle_click()",
"as is this one");
So, the event handler part wires up just fine (I tested it myself) but, as your comment indicates, you have no access to the "y" property of the object you just defined.
This works:
var object = {
y : 1,
handle_click : function (e) {
alert('handling click');
//want to access y here
alert(this.y);
return false;
},
load : function () {
var that = this;
document.getElementById('x').onclick = function(e) {
that.handle_click(e); // pass-through the event object
};
}
};
object.load();
There are other ways of doing this too, but this works.
I see how to do it with Jason's latest one. Any way to do it without the anonymous function?
We can directly pass an object with a handler method thanks to AddEventListener, and you will have access to its attributes:
http://www.thecssninja.com/javascript/handleevent
Hope this will help those who, like me, will look for this topic some years after!