我该如何清理这个jQuery代码？

Question

我有这个jQuery代码,我写了加载我一直在开发的插件.

我对此很新,所以这个问题可能看起来有些基本但我无法理解如何清理这段代码？有没有办法将它减少到更轻的东西？

基本上'a'表示div(目标)和.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>

Answer 1

使用[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'));
});