Question

你能解释为什么这个http://www.sebastiansulinski.co.uk/demos/jquery_show_hide/有效吗？所有类都相同，但是当您单击“打开”时，只会打开一个文本。为什么呢？

Answer 1

单击带有类触发器的div时，它将使用next()打开触发器旁边的元素。类名称无关紧要，因为它在$(this)上运行，这是被点击的元素。

在打开以下div之后，它会为自己分配一个“打开”类，以便当用户下次点击它时它可以采取不同的行动。

该页面的代码如下：

$('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.

Answer 2

它只打开一个文本容器，因为click事件绑定到匹配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;
});

Answer 3

一些内联评论可能会清楚地解释这一点：

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

Answer 4

$('div.trigger').click(function()...this...表示当您单击trigger类元素时，该函数仅应用于this，即您单击的元素。当您单击它时，它会获得一个新类open，从而为其提供新属性。

Answer 5

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

Answer 6

源代码中的$(document).ready()函数会将新的click函数附加到每个 $('div.trigger')元素：

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

在功能中，个人（当前）div由$(this)表示。

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

简而言之，每个div都分配了相同的功能，功能代码以当前（点击）div的角度编写。

jQuery的。为什么会这样？

6 个答案: