2

I have this:

jQuery(document).ready(function(){
    jQuery('a.color2030').click( function() {
        jQuery('tbody').hide();
        jQuery('tbody.color2030').show();
    });
    jQuery('a.color2031').click( function() {
        jQuery('tbody').hide();
        jQuery('tbody.color2031').show();
    });
...
...
    jQuery('a.color2037').click( function() {
        jQuery('tbody').hide();
        jQuery('tbody.color2032').show();
    });
});

But would like not to have to repeat the block of code for each link. I can get the id from the link in any way. It could be color2030 etc.

I have tried:

<a href="#color2030" class="color2030" id="test2030">
<a href="#color2031" class="color2031" id="test2031">
<a href="#color2032" class="color2032" id="test2032">

And in jQuery:

jQuery('a').click(function() {
    // this works
    var id = 'test';
    alert(id); // will alert 'test'

    // this does not work
    var id = $(this).attr('id');  //update2: should have been jQuery(this...
    alert(id); // no alert but error on page
});

But I cannot seem to get hold on the id. The "var id" line seems to have an error or so. Is there another way to get read an id/class or other tag from an a-tag when pressed?

BR. Anders

UPDATED: due to a typo that two persons spotted in not much more than 30 sek!

UPDATE2 and solved! The error I could not spot was the $(this) where it should have been jQuery(this) in the 'var id' line

Final update with solution This is was is doing the trick

jQuery(document).ready(function(){
    jQuery('a').click( function() {
        var id = this.id;
        alert(id);

        jQuery('tbody').hide();
        jQuery('tbody.'+id).show();
    });

});

6 Answers 6

4

onclick should be click:

jQuery('a').click(function() {
    var id = $(this).attr('id');
    alert(id);
});
1
  • Thanks for your feedback. You are right with the typo. There is also another error since I use jQuery instead of # but mixed it here
    – Tillebeck
    Dec 15, 2009 at 22:44
2

There are a few bugs. Here is the code refactored and working:

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery('a').click(function() {
                alert(this.id);
            });
        });
    </script>   

</head>
<body>

<a href="#color2030" class="color2030" id="test2030">test2030</a>
<a href="#color2031" class="color2031" id="test2031">test2031</a>
<a href="#color2032" class="color2032" id="test2032">test2032</a>

</body>
</html>
  1. onclick isn't a jQuery method. Please use click.
  2. this is an HTML DOM Anchor Object. Therefore, calling the property id will return its value.

Hope this helps.

1
  • The onclick was a typo, but the jquery vs. # I would never have found out. Thanks a lot. now I can go to bed
    – Tillebeck
    Dec 15, 2009 at 22:38
1

The error in your code is that you are binding to "onclick", instead of "click".

1

You have a typo in your event:

jQuery('a').click(function() {
    var id = $(this).attr('id');
    alert(id);
});

You're better off using Firebug or Web Developer to do this kind of debugging. That being said, you would have got a blank alert if this event fired properly...

1
  • I guess you are right. Working throgh a console is not much fun I can guarantee ;-) Thanks for your help
    – Tillebeck
    Dec 15, 2009 at 22:39
0

You had it basically correct - don't forget to wrap your script in $(document).ready(..), otherwise your script will try to bind it's event handlers before all of the elements have loaded. As noted above, you were also using onclick instead of click. You can also reference this directly.

<script type="text/javascript">
$(document).ready(function() {
    $('a').click(function() {
        var id = this.id;
        alert(id);
    });
});
</script>
1
  • Thanks Dexter. I have used your short way of getting the id (this.id) instead of my long example
    – Tillebeck
    Dec 15, 2009 at 22:47
0

From looking at what you are trying to do... you can't hide the tbody then unhide a portion of it. Try doing something like this:

HTML

<a href="#color2030" class="color">2030</a> 
<a href="#color2031" class="color">2031</a> 
<a href="#color2032" class="color">2032</a> 
<a href="#color2033" class="color">2033</a> 
<a href="#color2034" class="color">2034</a> 
<a href="#color2035" class="color">2035</a> 
<a href="#color2036" class="color">2036</a> 
<a href="#color2037" class="color">2037</a> 
<a href="#color2038" class="color">2038</a> 

<table>
 <tbody>
  <tr>
   <td id="color2030">2030</td>
   <td id="color2031">2031</td>
   <td id="color2032">2032</td>
  </tr>
  <tr>
   <td id="color2033">2033</td>
   <td id="color2034">2034</td>
   <td id="color2035">2035</td>
  </tr>
  <tr>
   <td id="color2036">2036</td>
   <td id="color2037">2037</td>
   <td id="color2038">2038</td>
  </tr>
 </tbody>
</table>

Script

$(document).ready(function(){
 $('table tbody td').hide();
 $('a.color').click(function(){
  var selColor = $(this).attr('href');
  $('table tbody td').hide();
  $('td'+selColor).show();
 })
})
1
  • Sure I can :-) Well, it works. But you may be right that it is not the best code. Hiding all, then showing some works just fine. But thanks for your feedback, stackoverflow is great
    – Tillebeck
    Dec 15, 2009 at 22:48

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.