Pass id of anchor to use in function: JQUERY

[cjay175]

Hey,

I was wondering if someone could help me with this.

I want to, when an anchor link is clicked, the id of the link is grabbed by jquery then passed to a function. The id is would be the same as the id of the div that is used for the function (highlight).

If someone could tell me or point me in the right direction.

Here is what I have right now.

<script type="text/javascript">

$(function(){
	$('#mainq a').click(function(){
	var id = this.id();
	$('this.id').highlightFade({speed:2000});
	});
	});

</script>

The HTML is like this (its for FAQ section):

QUESTIONS SECTION:

<div id="mainq" style="padding:10px;" class="mainq"><a name="top"></a>

<h3>Payment and Billing.</h3><br />
<a href="#aq1" id="qa1" onclick="javascript: getID(this)">What is water?</a><br />
<a href="#aq2" id="qa2" onclick="javascript: getID(this)">What is copper?</a><br />
</div>

<h3>Payment and Billing.</h3><br />
<a href="#aq1" id="qa1" onclick="javascript: getID(this)">What is water?</a><br />
<a href="#aq2" id="qa2" onclick="javascript: getID(this)">What is copper?</a><br />
</div>

ANSWERS HERE:

<div id="maina">
<hr /><div id="qa1" class="answertext"><a name="aq1"></a><h3>What is Water?</h3>
Water is H2O.<br /><a href="#top"><img src="images/top_arrow.jpg" border="0"/></a></div>
    
<hr /><div id="qa2" class="answertext"><a name="aq2"></a><h3>What is Copper?</h3>
Copper is cu.<br /><a href="#top"><img src="images/top_arrow.jpg" border="0"/></a></div>
</div>

The code is a little messy but I am just testing right now.

So if someone clicks on #aq1 link the id "aq1" is grabbed and used for the highlightFade function. It would highlight the div with id "aq1".

Thanks so much for any help

[Fungus1487]

1. Don't use ID like you do. ID's are meant to be unique but your first section use "qa1" and "qa2" twice in both anchors and is then used in the divs as part of the second section.

2. You dont need the "OnClick" attribute if using jQuery (it is not recommended practice)

3. The easiest way would be to change your anchors id to different attributes (perhaps your own) or seeing as you are using the id in the href attribute use that instead e.g.

<div id="mainq" style="padding:10px;" class="mainq"><a name="top"></a>
    <h3>Payment and Billing.</h3><br />
    <a href="#aq1">What is water?</a><br />
    <a href="#aq2">What is copper?</a><br />
    <h3>Payment and Billing.</h3><br />
    <a href="#aq1">What is water?</a><br />
    <a href="#aq2">What is copper?</a><br />
</div>

And then change your JavaScript to read...

<script type="text/javascript">
    $(function() {
        $('#mainq a').click(function() {
            var id = $(this).attr('href');
            $(id).highlightFade({speed:2000});
        });
    });
</script>

With the above code you then seperate the actual javascript from the page view. I have changed your id variable to get the href attribute which would be '#qa1' or '#qa2' and then it finds this element using another jQuery selector $(id).

Hope this helps

[cjay175]

Hey Fungus,

Sorry for the late reply I was out in the mountains yesterday.

Thanks a lot for the help it is working perfect.

Like I mentioned the code is messy just because I kept adding more and more stuff to it trying to get it to work. I am just starting to learn javascript and jquery.

thanks again for the help.

[Fungus1487]

No problem, if your all sorted you can mark the thread as solved.

[efadfsfasdf]

***

Emphasized Text Here

***