javascript - 如何获取从 jQuery click() 函数调用的特定于标签的自定义 Javascript 函数

Question

我有一堆 HTML 切换(两种状态)小部件。我在 HTML 中声明它们，如下所示:

<div class='togglewidget'></div>
<div class='togglewidget'></div>

这看起来不错，因为它干净简单。

然后我使用 jQuery 填充元素，使小部件实际上看起来像它们应该的那样。我还为点击事件附加了一个函数:

$(".togglewidget").append("/* stuff to make the widget work */");
$(".togglewidget").click(function() {toggleWidget(this);});

toggleWidget() 函数执行动画并处理状态更改。这一切都很好。

我想要的是向每个小部件添加一个自定义函数，该函数根据状态从toggleWidget() 函数调用。我想要这样的东西:

<div class='togglewidget' customfunc='clicked1'></div>
<div class='togglewidget' customfunc='clicked2'></div>

function toggleWidget(this) {
    var widget = $(s);
    if (/* check for toggle state */) {
        // state change of widget is animated (I know how to do this)
        ...
        // call custom function for this individual widget (how to do this?)
        widget.GetCustomFunc(true);
    } else {
        // state change of widget is animated (I know how to do this)
        ...
        // call custom function for this individual widget (how to do this?)
        widget.GetCustomFunc(false)
    }
}

然后我为第一个小部件定义 clicked1() ，为第二个小部件定义 clicked2() 。每个小部件都根据toggleWidget 中的行为正确地进行动画处理，并且 clicked() 和 clicked2() 定义了切换各个小部件时实际发生的情况。

最好的方法是什么？

我想我可以向每个togglewidget div添加一个onClick =“”，但是这样我就无法轻松访问小部件的状态，并且排序可能是一个问题。我认为标签具有“customfunc”属性的想法可能可行，但我认为这不会作为 HTML 进行验证。

Answer 1

您可以使用 jquery 检查 customfunc 属性:

if($(this).attr('customfunc')) =='customfunc1') {

}
else {

}