Question

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

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

基本上'a'显示div（目标）和.mv，.sb＆amp; .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-*] attributes存储您传递给插件的数据，并使用.data()访问[data-*]属性的自动值。 It's possible that you may want to use .attr() in some instances to prevent autocasting

我将假设以下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'));
});

Answer 2

这是有用的，因为你只有三个回调，但你可以使用一个简单的元素映射到“spot id”：

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

Answer 3

您可以使用html5数据属性将代码缩减为类似的内容;

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

Answer 4

试试这个：

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

Answer 5

怎么样......（只在单班时工作）

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

Answer 6

另一个扭曲的建议：

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

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

6 个答案: