SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Leaving a class in place

    Hi, I have a page with several lists with 4 thumbnails and 1 main image each. The images are being swapped using a modified version of this.

    Code JavaScript:
    $(document).ready(function(){
    	$(".brand-details li a").click(function(){
    			var largePath = $(this).attr("href");
    			var largeAlt = $(this).attr("title");
    			$('.brand-details li').removeClass('current');
    			$(this).parent('li').addClass('current');
    			$(this).parent('li').parent('ol').children('.largeImg').children('img').attr({ src: largePath, alt: largeAlt });return false;	
    	});
    });

    As you can see, a class is removed/added to highlight the current image but when you click on a thumbnail on a separate list it also removes the class from the previous list.

    How can I get it to leave the class IF it is a different list. Preferably without needing an ID?

    Many thanks

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Try the following, if your using an ordered list simply change ul to ol.

    Code JavaScript:
    $(this).parents('ul').children('li').removeClass('current');
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where would I put that? Would I replace the existing add/remove class code?

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You would simply replace

    $('.brand-details li').removeClass('current');
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  5. #5
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's done it, thanks so much!

  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    No problem
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle


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
  •