SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    .addClass not working with li ID

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

    Code:
    $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)

    HTML Code:
    <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>
    Code:
    .active { border:3px solid rgba(39, 166, 255, 0.6); }
    I also tried using

    Code:
    $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. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,084
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    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:

    Code javascript:
    $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.

    Code javascript:
    $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");
     
        });
    });
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •