如何清理此jQuery代码

How can I clean up this jQuery code?

本文关键字：代码 jQuery 何清理      更新时间：2023-09-26

我写了这个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:

    <ul class="nav">
                <li class="mavericks">
                    <a href="#display" class="mv">Mavericks</a>
                </li>
                <li class="santa-barbara">
                    <a href="#display" class="sb">Santa Barbara</a>
                </li>
                <li>
                    <a href="#display" class="sl">Steamer Lane</a>
                </li>
            </ul>
        <div class="content">
            <section id="display" class="beach"></section>
        </div>

使用[data-*]属性存储传递给插件的数据，并使用.data()访问[data-*]属性的自动复制值。在某些情况下，您可能希望使用.attr()来防止自动播放。

我将假设以下HTML，因为它没有提供：

HTML:
<a href="..." class="mv" data-spot-id="1">...</a>
<a href="..." class="sb" data-spot-id="2">...</a>
<a href="..." class="sl" data-spot-id="3">...</a>
JS:
$('[data-spot-id]').on('click', function () {
    $(this).surfplugin({
        spot_id: $(this).data('spotId')
    });
});

或者，如果您有更多的配置选项要传递给surfplugin，您可以让[data-*]属性包含JSON:

HTML:
<a href="..." data-surfplugin='{"spot_id":1,"foo":"bar baz"}'>...</a>
JS:
$('[data-surfplugin]').on('click', function () {
    $(this).surfplugin($(this).data('surfplugin'));
});

这样做的有用性是有争议的，因为您只有三个回调，但您可以使用元素到"spot id"s:的简单映射

var spots = [];
spot[1] = '.mv';
spot[2] = '.sb';
spot[3] = '.s1';
for (var i = 0; i < spot && spot[i]; ++i) {
  (function (i) {
    $(spots[i]).click(function () {
      $(this).surfplugin({ spot_id: i });
    });
  })(i);
}

您可以使用html5数据属性来将代码简化为这样；

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

那。。。（仅在单级时工作）

$(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});
    }
});

试试这个：

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]
    });
});
相关文章：