Question

我在网上选择了这个代码，但我无法理解它是如何工作的。没有理解我不能编辑它供我使用。当我点击＆＃34; x＆＃34;它是用于通过向上滑动关闭面板。按钮。我想知道脚本中的效果是如何产生的？这是html：

<div class="col-md-3 col-sm-6 col-xs-6">
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">Using Slide Up</h3>
            <span class="pull-right clickable" data-effect="slideUp">x</span>
        </div>
        <div class="panel-body">Panel content</div>
        <div class="panel-footer">Panel footer</div>
    </div>
</div>

处理此问题的脚本是：

    $(function() {
        $('.clickable').on('click', function() {
            var effect = $(this).data('effect');
            $(this).closest('.panel')[effect]();
        });
    });

Answer 1

这很简单。这是jQuery代码。有一个click事件绑定到具有类clickable的所有元素：

$('.clickable').on('click', function() {...});

然后你想知道你想要的效果。为此，请使用data-effect属性值：

var effect = $(this).data('effect'); // returns 'slideUp'

最后，您希望向上滑动附加了类panel的最近元素：

$(this).closest('.panel')[effect]();

我知道这一部分可能有点难以理解。这里的技巧是将效果名称保存在变量中。并且想要在.panel元素上调用具有该名称的方法。这是你在JS中的做法 - 你把变量放在方括号中并附加括号。这样您就可以调用.slideUp()方法。评估结果如下：

$(this).closest('.panel').slideUp();

另外，我建议您阅读有关jQuery的内容：https://api.jquery.com/

Answer 2

$('.clickable')

这是你的jquery选择器。它通过类＆＃34;可点击＆＃34;抓取所有元素。（点代表类。如果它是＆＃34; #clickable＆＃34;它会查找id为可点击的任何元素）

.on('click', function() {
}

现在，对于您选择的所有元素，我们都会对点击事件进行布线。单击选定的元素后，该函数将运行。

var effect = $(this).data('effect');

在这一行中，我们设置变量＆＃34;效果＆＃34;拥有数据属性的值＆＃34;数据效果＆＃34;来自被点击的元素（可以使用关键字＆＃34在函数中引用;这个＆＃34;）。＆＃34; .data＆＃34; method返回所有前缀为＆＃34; data - ＆＃34;。

的属性

$(this).closest('.panel')[effect]();

我们现在正在寻找与班级＆＃34;面板＆＃34;最接近的元素。到我们点击的元素（记住，可以在函数中使用＆＃34引用;这个＆＃34;）。

作为＆＃34;效果＆＃34;是一个变量，代码

.[effect]()

与编码相同（在您的示例中）（与您的数据效果=＆＃34;幻灯片＆＃34;在html中）

.slideUp()

在JavaScript中，您可以互换使用点表示法或括号表示法。

希望这有帮助

有人可以解释这个jquery代码是如何工作的

2 个答案: