Question

嘿伙计们我是Jquery和JS的新手，并且有一个非常简单的问题基本上我遇到了一个在线排序脚本，我试着通过浏览jquery文档来了解最新情况：

脚本如下：

$(function () {
        var buttons = $('#fruit,#vegetable,#meat').click(function() {
            $(this).toggleClass('active');
            var classes = buttons.filter('.active').map(function() {
                return this.id;
            })
            .get().join(',.');
            $('div.fruit,div.vegetable,div.meat').hide().
                filter('.' + (classes || 'none')).show();               
                console.log(classes.get().join(',.'));
        });
    });

并且此脚本在以下HTML上运行：

<div style="float:right; padding:25px;">
            <button id="fruit" class="active"><span>fruit</span></button>
            <button id="vegetable" class="active">vegetable</button>
            <button id="meat" class="active">meat</button>
        </div>

        <div>
            <p>Trying to use buttons as an "or" case rather than "and." When choosing fuit or vegetable, I want to see tomato as part of each list, <em>not just</em> when both are selected.</p>  

        <div class="fruit">
            <p>apple</p>
        </div>

        <div class="vegetable">
            <p>pumpkin</p>
        </div>

        <div class="vegetable">
           <p>okra</p>
        </div>

        <div class="fruit">
            <p>orange</p>
        </div>

        <div class="meat">
            <p>beef</p>
        </div>    


        <div class="fruit vegetable">
            <p>tomato</p>
        </div>    

        </div>

小提琴here。

现在我理解了脚本的大部分内容，除了以下内容：

在作者使用以下代码的脚本的第四行：

                var classes = buttons.filter('.active').map(function() {

现在按钮没有返回任何值，所以它应该是空的吗？

或是通过说下面的内容（第一行）：

            var buttons = $('#fruit,#vegetable,#meat').click(function() {

作者还隐式定义了按钮，如：

var buttons = $('#fruit,#vegetable,#meat')

有人可以为我澄清这一点，因为我正在努力抓住这个简单的概念。

谢谢。

亚历-Z

Answer 1

这是一种不寻常的模式，但buttons确实在语句中正确声明（并且显式`）：

var buttons = $(...).click(...);

当任何click事件发生时，上面的代码将被执行（因为JS是单线程的）并且buttons已经包含所需的元素集，并且可以安全地在回调。

这当然也依赖于许多jQuery方法“链”的方式 - 它们返回与调用它们的对象相同的对象，因此最终结果是buttons只包含{{1 }}

Answer 2

你的假设是正确的。 buttons是在绑定点击事件的同时定义的。大多数运行在元素上的jQuery方法（即由选择器返回）而不是jQuery名称空间本身的静态方法都是如此。所以：

var els = $('*').filter('.foo').attr('class', 'bar');

返回*和.foo匹配的元素，而同时设置类bar。

jQuery使用了所谓的链接模式 - 也就是说，方法是一个接一个地链接 - 而且这是一种人们反对这种模式的推断赋值。正如您所发现的那样，如果您对此模式不太了解，则很难推断出分配。

声明变量而不返回值。

2 个答案: