SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Jquery: Madness

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery: Madness

    Hi all.

    I have the following click event in JQuery and wish to duplicate it 6 times.

    if($('#booking_customer_date_of_birth_1_display').length > 0)
    {
    $('#booking_customer_date_of_birth_1_display').click(function()
    {
    $(this).hide();
    $('#booking_customer_date_of_birth_1_editable').show();
    });
    }

    Replacing the number part with the number of each loop iteration i.e. booking_customer_date_of_birth_1_display becomes booking_customer_date_of_birth_2_display etc...

    However have tried putting this in a for-loop but it does not work.

    for($i = 2; i <= 6; i++)
    {
    if($('#booking_customer_date_of_birth_' + i + '_display').length > 0)
    {
    $('#booking_customer_date_of_birth_' + i + '_display').click(function()
    {
    $(this).hide();
    $('#booking_customer_date_of_birth_' + i + '_editable').show();
    });
    }
    }

    Can anyone suggest how this can be done in JQuery.

    Thanks.
    Phil.

  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)
    Your loop assigns a variable called $i, but I think you intended to use it as i

    Replace:
    Code:
    for($i = 2; i <= 6; i++)
    With:

    Code:
    for(var i = 2; i <= 6; i++)
    I'm also not sure why you are starting at 2.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by negys View Post
    Can anyone suggest how this can be done in JQuery.
    One possible way is to search for all elements that start with the same identifier.
    Something like this should do.

    Code javascript:
    function attachShowEvent(el) {
        if ($(el).length > 0) {
            $(el).click(function () {
                var editable = el.id.replace('display', 'editable');
                $('#' + editable).show();
                $(this).hide();
            });
        }
    }
     
    $('[id^="booking_customer_date_of_birth_"]').each(function () {
        if (this.id.substr(-7) === 'display') {
            attachShowEvent(this);
        }
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,135
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    When the function being passed to clicked is called i will be 6. In order to have the correct vale requires a closure with self invocation and a binding the state of i. This has nothing to do with jQuery but JavaScript 101. That is why you should learn JavaScript before jQuery…

    Code JAVASCRIPT:
    for($i = 2; i <= 6; i++) {
    	if($('#booking_customer_date_of_birth_' + i + '_display').length > 0) {
    		$('#booking_customer_date_of_birth_' + i + '_display').click((function(item) {
    			return funtion() {
    				$(this).hide();
    				$('#booking_customer_date_of_birth_' + item + '_editable').show();
    			};
    		})(i));
    	}
    }
    The only code I hate more than my own is everyone else's.


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
  •