SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I don't understand $(this)

    I'm wondering how it works. I would like to use $(this) to do two things. In the script below, only the first one executes. The rest of the script is ignored.

    Code JavaScript:
    $("#groups").delegate("a", "click", function() {
    		window.location.hash = $(this).attr("href");
    		$("#groups a").removeClass('active');
     
             // if the .addClass line below is not commented out, the rest of the script is ignored.
    		$(this).addClass('active');
     
    		// find the new page name by class
    		var pageName = $(this).attr('class');
     
    		// switch the bg in the css
    		$("html").css("background-image","url(images/" + pageName + ".jpg)");
     
    		return false;
    	});
    Your help is greatly appreciated, as always!

  2. #2
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you certain it is being ignored. It looks to me like you assign a class to the hyperlink, then use the class to change the background image. If your links already have a class then you will end up with a class attribute that contains the word 'active' along with white space and other class names, which will break what you are trying to do with the background image.

    In the call back of many jQuery functions 'this' refers to each element in the collection. Using $(this) means that you are creating a jQuery object out of the individual element, in your case this means the hyperlink. By doing that you can use all of the jQuery functions to do neat things, like adding the class.

    There is a simple way to fix your code, I believe. Try:

    Code JavaScript:
    $("#groups").delegate("a", "click", function() {
            window.location.hash = $(this).attr("href");
            $("#groups a").removeClass('active');
     
            // find the new page name by class
            var pageName = $(this).attr('class');
     
            // switch the bg in the css
            $("html").css("background-image","url(images/" + pageName + ".jpg)");
     
            // Moved the assignment of the active class below the css background change
            $(this).addClass('active');        
     
            return false;
        });

    There would be a better way of achieving the same outcome here and that is to use a CSS class to hold the image information instead of changing the background image url via javascript.

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for this. Nice explanation of what was going on. Moving the .addClass('active') to the bottom works fine, as expected. I see now that by adding 'active' to the element first, then trying to call the bg image based on the class name of the element, it made no sense.


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
  •