Jquery. Why this works?

Can you explain why this http://www.sebastiansulinski.co.uk/demos/jquery_show_hide/ works? There 开发者_开发问答is all classes the same, but when you click open, opens only one text. Why?

It only opens one text container because the click event is bound to each individual element matching div.trigger. When you click on one of the matching elements, you are only clicking on one matching element, not all 3 in the example. Usage of $(this) inside the click callback function only references the clicked element.

The code can also be cleaned up a little bit by simply chaining calls together:

$('div.trigger').click(function() {
    if ($(this).hasClass('open')) {
        $(this).removeClass('open').addClass('close').next().slideDown(100);
    } else {
        $(this).removeClass('close').addClass('open').next().slideUp(100);
    }
    return false;
}); 

When you click a div with class trigger, it will open up the element next to the trigger using next(). The class names don't matter as it operates on $(this), which is the clicked element.

After it has opened the following div, it assigns itself a class 'open' so that it can act differently when the user clicks on it the next time.

The code for that page goes like this:

$('div.trigger').click(function() {
    if ($(this).hasClass('open')) {
        $(this).removeClass('open');
        $(this).addClass('close');
        $(this).next().slideDown(100);
        return false;
    } else {
        $(this).removeClass('close');
        $(this).addClass('open');
        $(this).next().slideUp(100);
        return false;
    }            
});

Which, translated to english, goes like this:

/*
When .trigger is clicked:
    If it has a class named 'open':
        Remove that class,
        and add a class named 'close'.
        Slide down the element next to this element in 100 milliseconds.
        Prevent other actions from taking place.
    If it hasn't got a class named 'open':
        Remove class 'close',
        and add class 'open'.
        Slide up the element next to this element in 100 milliseconds.
        Prevent other actions from taking place.

Some inline commentary might explain this clearly:

#If we have divs with the class 'trigger'
if($('div.trigger').length > 0) {
  # Attach logic to the click event of each
  $('div.trigger').click(function() {
    # If this has the class 'open' already
    if ($(this).hasClass('open')) {
      # Remove the class 'open'
      $(this).removeClass('open');
      # Add the class 'close'
      $(this).addClass('close');
      # And slide down the next div
      $(this).next().slideDown(100);
      # Return False
      return false;
    } else {
      # If this didn't have 'open', remove 'close'
      $(this).removeClass('close');
      # Add the class 'open'
      $(this).addClass('open');
      # And slide up the next div
      $(this).next().slideUp(100);
      # Return false
      return false;
    }           
  });
}

$('div.trigger').click(function()...this... Means that when you click on a trigger class element, the function is applied to only this, being the element you clicked on. When you click on it, it gets a new class, open, which gives it new properties.

This is because you are operating with $(this) which translates to the button you click.

The $(document).ready() function in the source code attaches a new click function to every $('div.trigger') element:

$('div.trigger').click(function() {
    // ...
});

In the function the individual (current) div is denoted by $(this).

if ($(this).hasClass('open')) {
    // ...
}           

In a nutshell, each div has the same function assigned and the function code is written in the perspective of the current (clicked) div.