jQuery的.为什么会这样？

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)click click回调函数内部的用法仅引用被点击的元素.

通过简单地将调用链接在一起,也可以清除代码:

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