Jquery。为什么会这样？

你能解释一下为什么会这样吗？

---

所有类都是相同的，但单击“打开”时，仅打开一个文本。为什么？

当您使用类触发器单击div时，它将使用

next（）

打开触发器旁边的元素。类名并不重要，因为它在单击的元素

$（this）

上运行

在打开下面的div之后，它为自己分配了一个类“open”，这样当用户下次单击它时，它可以采取不同的操作

该页面的代码如下所示：

$('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;
    }            
});

/*
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.

翻译成英语，是这样的：

$('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;
    }            
});

/*
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.

---

$（'div.trigger'）。单击（函数（）…这…

意味着当您单击

触发器

类元素时，该函数仅应用于您单击的元素

此

。当您单击它时，它将获得一个新类，

打开

，该类赋予它新属性。

它仅打开一个文本容器，因为单击事件绑定到每个indiv单个元素匹配

div.trigger

。单击其中一个匹配元素时，仅单击一个匹配元素，而不是示例中的所有3个。在单击回调函数中使用

$（this）

仅引用单击的元素

通过简单地将调用链接在一起，也可以稍微清理代码：

$('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;
}); 

---

这是因为您使用$（This）操作，它转换为您单击的按钮。

源代码中的

$（document.ready（）

函数将一个新的

单击
函数附加到每个
$（'div.trigger'）
元素：

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

在函数中，单个（当前）div用
$（this）
表示

简而言之，每个div都分配了相同的函数，并且函数代码是从当前（单击的）div的角度编写的。
一些内联注释可能会清楚地解释这一点：

#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;
    }           
  });
}