JQuery get Class issue

Question

I have an issue in JQuery in getting CLASS NAME of clicked element.

Here's my code so far: CODEPEN

HTML

<div class="sideNav">
    <a href="#" id="technical" class="servicesTech">
        <div class="sideThumb cap-left">
            <img src="http://lorempixel.com/200/200/technics" />
            <figcaption class="thumb_caption">Sample1</figcaption>
        </div>
    </a>
    <a href="#" id="sales" class="servicesSales">
        <div class="sideThumb cap-left">
            <img src="http://lorempixel.com/200/200/business" />
            <figcaption class="thumb_caption">Sample2</figcaption>
        </div>
    </a>
</div>

JQUERY

$(document).ready(function(){           

    $('a').bind('click', function(){
        idName = "#" + $(this).attr('id');
        className= $(this).attr('id');
        var getClassElem = $(this).attr('class');

        alert(getClassElem);

        $("a").removeClass();
        $(idName).addClass(className);
    });

});

Issue

It only works on first load of the page. but when I clicked the other MENU it doesn't show on ALERT. I just used ALERT for showing if it is retrieving correctlt.

Any help will so much appreciated. Thanks!

No pens here! It says, "There is nothing here, Monsieur. My giant magnifying glass on a stick tells no lies." — Praveen Kumar Purushothaman, Apr 30 '14 at 03:31
CodePen, JSFiddle, JSBin is not a substitute. You should always post relevant code here. __As CodePen is not available, Question is good candidate for close vote.__ — Satpal, Apr 30 '14 at 03:32

score 1 · Accepted Answer · answered Apr 30 '14 at 03:35

1

You have written:

$('a').bind('click', function(){
    idName = "#" + $(this).attr('id');
    className= $(this).attr('id');
    var getClassElem = $(this).attr('class');

    alert(getClassElem);

    $("a").removeClass();
    $(idName).addClass(className);
});

It can be optimized as:

$('a').click(function(){
    $("a").removeAttr("class");
    $(this).addClass($(this).attr("id"));
});

Few other things:

What are you trying to do?
How can you have a <div> element inside an <a> element?

answered Apr 30 '14 at 03:35

Praveen Kumar Purushothaman

164,888
24
203
252

1

thank you for that optimization. 1. what I'm trying to do is just get the `class name` of that clicked `LINK` then that `CLASS NAME` will open new main content. 2. Actually, I google it then I found this:[HERE!](http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct). Thanks for that info. I will update my HTML. Therefore its not working because of that `
` element inside an `` element?
– rayncorg Apr 30 '14 at 03:50
Yes. Many browsers will kick out `
` elements inside `` elements!
– Praveen Kumar Purushothaman Apr 30 '14 at 03:51
1

Ok thank you so much sir. So you mean my retrieving of class in JQUERY is correct is just that my HTML is wrong? – rayncorg Apr 30 '14 at 03:53
1

To an extent, yes! :) – Praveen Kumar Purushothaman Apr 30 '14 at 03:53

JQuery get Class issue

1 Answers1