Javascript 如何清理这个jQuery代码？

我有这个jQuery代码，我写它来加载我一直在开发的插件

我对这个问题还比较陌生，所以这个问题可能看起来有点基本，但我就是不知道如何清理这个代码？有没有办法把这个减到轻一点的

基本上，“a”表示div（target）和.mv、.sb和.sl都是“a”标记的类。根据要单击的链接，单击将取决于显示的内容（spot_id更改从插件加载的数据）

代码运行良好，但我相信有一种更简单的方法来编写它。提前谢谢

$('a').click(function () {
    $(this).attr("href");
});

$('.mv').click(function () {
    $(this).surfplugin({
        spot_id: 1
    });
});

$('.sb').click(function () {
    $(this).surfplugin({
        spot_id: 2
    });
});

$('.sl').click(function () {
    $(this).surfplugin({
        spot_id: 3
    });
});

HTML:

由于您只有三个回调，因此此方法的有用性值得商榷，但您可以使用元素到“spot id”的简单映射：

var点=[]；
斑点[1]='.mv'；
spot[2]='sb'；
斑点[3]='.s1'；
对于（变量i=0；i

用于存储传递给插件的数据，并用于访问

[data-*]

属性的自动粘贴值

我将假设以下HTML未提供：

HTML: 或者，如果您有更多的配置选项要传递给

surfplugin

，则可以让

[data-*]

属性包含JSON：

HTML:

---

您可以使用html5数据属性将代码简化为以下内容：

$('.mv,.sl,.sb').click(function () {
    $(this).surfplugin({
        spot_id: $(this).attr('data-spot_id');
    });
});

试试这个：

var selectors = ['.mv', '.sb', '.sl'];
$(selectors.join(', ')).on('click', function() {
    $(this).surfplugin({
        spot_id: selectors.indexOf('.'+this.getAttribute('class')) + 1 
    })
});

那么。。。（仅在单个类中工作）

---

另一个扭曲的建议：

$('.mv,.sb,.sl').click(function () {
    var $el = $(this),
        re = /(^|\s)(mv|sb|sl)(\s|$)/,
        cls = $el.attr('class').match(re)[2],
        map = { mv: 1, sb: 2, sl: 3 };
    $el.surfplugin({
        spot_id: map[cls]
    });
});

---

代码在我看来比较干净…4个处理程序，发生的事情很少。Err，$（'a'）。单击（function（）{$（this.attr（“href”）；}）实际上什么都没做？这个问题似乎离题了，因为它应该是开着的

$('[data-spot-id]').on('click', function () {
    $(this).surfplugin({
        spot_id: $(this).data('spotId')
    });
});

<a href="..." data-surfplugin='{"spot_id":1,"foo":"bar baz"}'>...</a>

$('[data-surfplugin]').on('click', function () {
    $(this).surfplugin($(this).data('surfplugin'));
});

$('.mv,.sl,.sb').click(function () {
    $(this).surfplugin({
        spot_id: $(this).attr('data-spot_id');
    });
});

var selectors = ['.mv', '.sb', '.sl'];
$(selectors.join(', ')).on('click', function() {
    $(this).surfplugin({
        spot_id: selectors.indexOf('.'+this.getAttribute('class')) + 1 
    })
});

$(document).on('click','.mv, .sb, .sl',function () {
    var class = $(this).attr('class');
    var list = ['mv','sb','sl'];
    var i = $.inArray(class,list);
        i = i!==-1?i+1:false;
    if(i) {
        $(this).surfplugin({spot_id:i});
    }
});

$('.mv,.sb,.sl').click(function () {
    var $el = $(this),
        re = /(^|\s)(mv|sb|sl)(\s|$)/,
        cls = $el.attr('class').match(re)[2],
        map = { mv: 1, sb: 2, sl: 3 };
    $el.surfplugin({
        spot_id: map[cls]
    });
});