Question

$(".refine_button").click(function(){
var butt = $(this);
$(this).next(".refine_block").slideToggle("normal", function(){
        butt.children(".refine_icon").toggleClass("opened");
        });
});

特别是'butt.children'

由于

Answer 1

任何点击了“refine_button”类的按钮都会找到一个带有“refine_block”类的元素，然后将其“滑入”或向外滑动（取决于它是否已经进入或退出，它将调用相反）。当幻灯片完成时，它会将一个类添加到名为“opened”的受影响“refine_block”中的“refine_icon”元素上。这只会影响与被点击的原始“refine_button”直接相邻的代码中的下一个元素。

Answer 2

$(".refine_button").click(function(){ // when an element with the class refine_button is clicked
    var butt = $(this); // store a reference to the element clicked
    $(this).next(".refine_block") // get the next element if it has a class refine_block
        .slideToggle("normal", function(){ // and slide it open or closed, depending on its current status
            // when that animation is finished
            butt.children(".refine_icon") // get any children of the original clicked element that have the class refine_icon
                .toggleClass("opened"); // and add or remove the class opened, depending whether they currently have it
        });
});

Answer 3

butt是一个包含jQuery对象的变量;它包含一个单独的元素（被点击的类refine-button的元素。

children函数返回jQuery对象中元素的子元素，可选择由选择器进行过滤，因此您将检索被点击元素的子元素，其中包含“refine-icon”类（顺便说一句，你正在切换“打开”这个课程。）

Answer 4

当您单击应用了“refine_button”类的元素时，jQuery会在页面上找到应用了“refine_block”类的下一个元素，然后折叠或展开它（通过slideToggle方法）。一旦slideToggle完成，它将在“refine_block”中定义的所有“refine_icon”元素上添加或删除“已打开”类。

Answer 5

兴趣点：

它将适用于具有类refine_button的任何元素，而不仅仅是按钮 - 偶数div或图像。如果一只狗被称为“Kitty”，它仍然是一只狗。
children只返回父级的直接子元素，没有深度查找。
butt被声明为保留父元素，因为$(this)在slideToggle函数中会有不同的含义。

这段代码用简单的英语表示什么？

5 个答案: