Easy jQuery Question - Selecing a div with the same class as the a

Question

I want to do this, but haven't figured it quite out yet...

    $(document).ready(function() {
        $("a.whateverclass").click(function() {
            $("div.whateverclass").show();
            return false;
        });

Basically when a link with a certain class is clicked all divs with that class are shown. The classes can be any class. And I won't know the name(s) of the classes in the application.js file so I need to match equal classes.

Answer 1

$("a").click(function() {
        $("div." + $(this).attr('class')).show();
});

Answer 2

I like @Eran's answer, but in event that you have some links that don't fit this pattern, you may want to make sure that you only apply this to links that do.

$('a[class]').click(function() {
    $('div.' + $(this).attr('class')).show();
    return false;
});

And in the case where links may have other classes applied to them, you may want to use a naming scheme such as:

$('a[class^=div-]').click(function() {
    $('div.' + $(this).attr('class')).show();
    return false;
});
<div class='div-mydiv'></div>
<a href='javascript:void(0);' class='div-mydiv'>Show</a>

<a href='mailto:[email protected]' class='mail-link'>Contact Us</a>