943,909 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Pass id of anchor to use in function: JQUERY
Ad:
Permalink
Jun 24th, 2009
0

Pass id of anchor to use in function: JQUERY

Expand Post »
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.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <script type="text/javascript">
  2.  
  3. $(function(){
  4. 	$('#mainq a').click(function(){
  5. 	var id = this.id();
  6. 	$('this.id').highlightFade({speed:2000});
  7. 	});
  8. 	});
  9.  
  10. </script>

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

QUESTIONS SECTION:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <div id="mainq" style="padding:10px;" class="mainq"><a name="top"></a>
  2.  
  3. <h3>Payment and Billing.</h3><br />
  4. <a href="#aq1" id="qa1" onclick="javascript: getID(this)">What is water?</a><br />
  5. <a href="#aq2" id="qa2" onclick="javascript: getID(this)">What is copper?</a><br />
  6. </div>
  7.  
  8. <h3>Payment and Billing.</h3><br />
  9. <a href="#aq1" id="qa1" onclick="javascript: getID(this)">What is water?</a><br />
  10. <a href="#aq2" id="qa2" onclick="javascript: getID(this)">What is copper?</a><br />
  11. </div>


ANSWERS HERE:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <div id="maina">
  2. <hr /><div id="qa1" class="answertext"><a name="aq1"></a><h3>What is Water?</h3>
  3. Water is H2O.<br /><a href="#top"><img src="images/top_arrow.jpg" border="0"/></a></div>
  4.  
  5. <hr /><div id="qa2" class="answertext"><a name="aq2"></a><h3>What is Copper?</h3>
  6. Copper is cu.<br /><a href="#top"><img src="images/top_arrow.jpg" border="0"/></a></div>
  7. </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
Reputation Points: 10
Solved Threads: 2
Light Poster
cjay175 is offline Offline
49 posts
since May 2009
Permalink
Jun 24th, 2009
0

Re: Pass id of anchor to use in function: JQUERY

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.
HTML Syntax (Toggle Plain Text)
  1. <div id="mainq" style="padding:10px;" class="mainq"><a name="top"></a>
  2.     <h3>Payment and Billing.</h3><br />
  3.     <a href="#aq1">What is water?</a><br />
  4.     <a href="#aq2">What is copper?</a><br />
  5.     <h3>Payment and Billing.</h3><br />
  6.     <a href="#aq1">What is water?</a><br />
  7.     <a href="#aq2">What is copper?</a><br />
  8. </div>
And then change your JavaScript to read...
javascript Syntax (Toggle Plain Text)
  1. <script type="text/javascript">
  2.     $(function() {
  3.         $('#mainq a').click(function() {
  4.             var id = $(this).attr('href');
  5.             $(id).highlightFade({speed:2000});
  6.         });
  7.     });
  8. </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
Reputation Points: 66
Solved Threads: 56
Posting Pro in Training
Fungus1487 is offline Offline
459 posts
since Apr 2007
Permalink
Jun 25th, 2009
0

Re: Pass id of anchor to use in function: JQUERY

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.
Reputation Points: 10
Solved Threads: 2
Light Poster
cjay175 is offline Offline
49 posts
since May 2009
Permalink
Jun 26th, 2009
0

Re: Pass id of anchor to use in function: JQUERY

No problem, if your all sorted you can mark the thread as solved.
Reputation Points: 66
Solved Threads: 56
Posting Pro in Training
Fungus1487 is offline Offline
459 posts
since Apr 2007

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: please help me i need to make my own CHATROOM
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: how do i pass arrays in javascript to php using POST method





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC