1

I'm writing a function which requires knowing the location of the clicked div.

I'm wondering if I can get the location of a clicked object as a javascript variable?

here is the code.

HTML

<area shape="rect" coords="103, 0, 213, 25" href="#" onClick="swap3($(this),'product-details','product-specs');">

Javascript:

function swap3(currentDivId ,oldDivId, newDivId) {
    var oldDiv = currentDivId.nextAll("div." + oldDivId);
    var newDiv = currentDivId.nextAll("div." + newDivId);
    oldDiv.style.display = "none";
    newDiv.style.display = "block";
}
Improve this question

2 Answers 2

Reset to default
3

this refers to the current element.

In jQuery, as they use $() to get an element, $(this) returns the jQuery equivalent of vanilla JS's this.

<area shape="rect" coords="103, 0, 213, 25" href="#" onClick="swap3(this,'product-details','product-specs');">
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thanks this answers my question. What would the value of 'this' be in this situation? The id of the <area>?
If you alert it, it's something like Object[HTMLObject] - a DOM element, containing all the information about the tag, it's children, its attributes, and so on.
This is not correct. $(this) returns a jQuery object containing one element -- the current evaluation of this.
What's not right? :s I said $(this) returns jQ's equivalent of this, then said this is an Object[HTMLObject], thus implying $(this) is a jQuery object. Genuinely interested in what I've got wrong here :)
If this evaluates to a DOM element then $(this) doesn't "get" anything -- it only wraps the DOM element. $(this).jqueryProp is only "equivalent" to this.normalDOMProp in the case where this evaluates to a DOM object. Just little details. The comment is more explicit about this than the post.
0

$() returns a DOM element (like an object that you can work with it's methods, properties, etc) and if you set a variable to it, the variable must work like an jQuery-Object correctly. But in my experience, some times that DO NOT! and I learn the best way is to get the variable by jQuery-selector ($). Your code is correct, but should be better if you apply these changes:

function swap3(currentDivId ,oldDivId, newDivId) {
    var oldDiv = $(currentDivId).nextAll("div." + oldDivId);
    var newDiv = $(currentDivId).nextAll("div." + newDivId);
    $(oldDiv).css({"display" : "none"});
    $(newDiv).css({"display" : "block"});
}
Improve this answer

6 Comments

Thanks, still not working but I've moved the question here... stackoverflow.com/questions/7368995/… and might have to reword it yet again. Cheers!
Ok. I will look at link, and if I can, I will help you.
This is not correct. $(x) returns a jQuery object from the given DOM element (the one referred to by x, remember that this is set to the element raising an event in an traditional event callback).
By originally purpose of jQuery you are right. But my experience told me some thing else! I know what are you talking about, so thanks.
oldDiv and newDiv are already jQuery objects. It is superfluous to pass them again to jQuery. $() always returns a jQuery object and so do most of the methods. What the methods return is mentioned in the documentation. The statement that $() returned a DOM element is simply wrong. (-1)
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.