Javascript 有人能解释一下jquery代码是如何工作的吗

我在网上选择了这个代码，但我无法理解它是如何工作的。没有理解，我无法编辑它供我使用。当我点击“x”按钮时，它是通过向上滑动来关闭面板的。我想知道脚本中的效果是如何创建的？ 以下是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>

---

这很简单。这是jQuery代码。有一个

click

事件绑定到类为

clickable

的所有元素：

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

然后你想知道你想要什么效果。为此，需要使用

数据效果

属性值：

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

最后，您希望向上滑动最近的元素，并将类

面板

附加到该元素：

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

我知道这部分可能有点难以理解。这里的技巧是将效果名称保留在变量中。并希望在

.panel

元素上使用该名称调用该方法。在JS中就是这样做的——将变量放在方括号中并附加括号。这样可以调用

.slideUp（）

方法。评估结果如下：

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

另外，我建议您阅读一些关于jQuery的内容：

这是您的jquery选择器。它抓取类为“clickable”的所有元素（点代表类。如果它是“clickable”，它将查找id为clickable的任何元素）

现在，对于所有选定的元素，我们将连接一个单击事件。单击所选元素后，该函数将运行

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

在这一行中，我们将变量“effect”设置为具有来自单击元素的数据属性“data effect”的值（可以在函数中使用关键字“this”引用该值）。“.data”方法返回前缀为“data-”的所有属性

在这里，我们正在搜索类为“panel”的元素与单击的元素最近（记住，可以在函数中使用“this”引用该元素）

由于“effect”是一个变量，代码

.[effect]()

与编码相同（在您的示例中）（如html中的data effect=“slideUp”）

在JavaScript中，可以交替使用点符号或括号符号

---

希望这对您有所帮助

您不理解代码的哪一部分？你熟悉jQuery吗？当点击

.clickable

元素时，它会将

slideUp

应用到最近的

。panel

项这是

$（this）。最近的（'.panel'）[effect]（）

你没有得到的行吗？@Bergi是的，我熟悉jQuery。请具体解释这两行：var effect=$（this.data（'effect'）$（这个）。最近的（'.panel'）[效果]（）；如果您不理解这两条基本行，那么您显然不熟悉jQuery。您需要的所有信息都在他们的文档中。我建议你去读一下。

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

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

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

.[effect]()

.slideUp()