.addClass not working with li ID

JavaScript
1

I am trying to add a class to an li ID but .addClass isn’t working in the current situation:


$j=jQuery.noConflict();

$j(document).ready(function () {
$j("#ATT").click(function() {
      $j("ul#carrier li#attA").addClass("active");
    });

(Using noConflict because I am doing this in a Wordpress page)


<ul id="carrier">

<li id="attA">
<form method="post">
<input type="hidden" name="carrier" value="" id="carrier">
<a href="javascript:get_carrier('ATT');"><img src="/img/carrier-att.png" id="ATT" alt="AT&T" width="140" height="40"></a>
</li>
<li id="verizonA"><a href="javascript:get_carrier('Verizon');"><img src="/img/carrier-verizon.png" id="Verizon" alt="Verizon" width="140" height="40"></a></li>
<li id="sprintA"><a href="javascript:get_carrier('Sprint');"><img src="/img/carrier-sprint.png" id="Sprint" alt="Sprint" width="140" height="40"></a></li>
</ul>



.active { border:3px solid rgba(39, 166, 255, 0.6); }

I also tried using


$j("ul#carrier li#attA").closest("li").addClass("active");

But didn’t have any luck.

Here is what I am trying to achieve; when the user clicks the image (#ATT) I want the li to have a border around it (hence the .active class). I can easily achieve this using .css but when the user clicks another option (e.g #Sprint) I want to remove the style from whatever they chose last and have it only on the option they just clicked. That’s why I’m trying to use .addClass, so I can use .removeClass when they select a different option.

Thanks.
-Luke

2
  1. You have two elements with the ID of “carrier” which is not allowed (since IDs must be unique on a page) and probably throws jQuery off here which is why it doesn’t work
  2. Since “attA” is also an ID and also unique on the page there is no need to prefix it with another ID. Just using $('#ATT') should work fine as well.
  3. Even better, since you’re already binding .click on $('#ATT') you can just use $(this) in the callback.

So:


$j=jQuery.noConflict();

$j(document).ready(function () { 
    $j("#ATT").click(function() {
        $j(this).addClass("active");
    });
});

Also, if you remove the ID “carrier” from the input so there is just one element with that ID you can use the following to make all IDs with #carrier clickable as you want.


$j=jQuery.noConflict();

$j(document).ready(function () {
    var elems = $j("#carrier li");

    // when clicking on any of the <li> within ul#carrier
    elems.click(function() { 

        // remove active from all <li> elements within ul#carrier,
        // except for the <li> currently clicked -- to prevent
        // removing and than re-adding the active class to
        // that <li> which might cause hickups
        elems.not(this).removeClass('active'); 

        // add the active class to the clicked item
        $j(this).addClass("active");

    });
});
3

Thanks for your response, ScallioXTX, when I tried your updated code it didn’t work at first which led me to find an underlying CSS problem; I had a white border around the li which for some reason prevented the border trying to be added in the new class. All fixed now though. Thanks again for your help.