javascript - 如何将我的 JQuery 函数压缩为一个块？

Question

我对 JQuery 比较陌生，所以我需要你的帮助来浓缩这个：

<!--Tabs-->
<script>
$(document).ready(function () {
    $('ul.tabs-style1 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs-style1 li').removeClass('current');
        $('.tab-content-style1').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})
</script>
<script>
$(document).ready(function () {
    $('ul.tabs-style2 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs-style2 li').removeClass('current');
        $('.tab-content-style2').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})
</script>
<script>
$(document).ready(function () {
    $('ul.tabs-style3 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs-style3 li').removeClass('current');
        $('.tab-content-style3').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})
</script>

我如何将所有样式包含在一个块中？先感谢您！

EDIT1：我的标记如下：

<h4>Style 1</h4>
<ul class="tabs-style1">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
<li class="tab-link" data-tab="tab-3">Tab Three</li>
<li class="tab-link" data-tab="tab-4">Tab Four</li>
</ul>
<div class="clear"></div>
<div id="tab-1" class="tab-content-style1 current">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="tab-2" class="tab-content-style1">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="tab-3" class="tab-content-style1">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div id="tab-4" class="tab-content-style1">
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<br>
<h4>Style 2</h4>
<ul class="tabs-style2">
<li class="tab-link current" data-tab="tab-5">Tab One</li>
<li class="tab-link" data-tab="tab-6">Tab Two</li>
<li class="tab-link" data-tab="tab-7">Tab Three</li>
<li class="tab-link" data-tab="tab-8">Tab Four</li>
</ul>
<div class="clear"></div>
<div id="tab-5" class="tab-content-style2 current">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="tab-6" class="tab-content-style2">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="tab-7" class="tab-content-style2">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div id="tab-8" class="tab-content-style2">
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
<br>
<h4>Style 3</h4>
<ul class="tabs-style3">
<li class="tab-link current" data-tab="tab-9">Tab One</li>
<li class="tab-link" data-tab="tab-10">Tab Two</li>
<li class="tab-link" data-tab="tab-11">Tab Three</li>
<li class="tab-link" data-tab="tab-12">Tab Four</li>
</ul>
<div class="clear"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="tab-10" class="tab-content-style3">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="tab-11" class="tab-content-style3">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div id="tab-12" class="tab-content-style3">
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

我在想这样的事情可能没问题，但它不起作用：S

$(document).ready(function () {
    $('ul.tabs-style1 li, ul.tabs-style2 li, ul.tabs-style3 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs-style1 li, ul.tabs-style2 li, ul.tabs-style3 li').removeClass('current');
        $('.tab-content-style1, .tab-content-style2, .tab-content-style3').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})

score 0 · Accepted Answer

您可以使用Multiple Selector (“selector1, selector2, selectorN”)，并假设您存储1, 2, 3在data-tab属性中

$(document).ready(function () {
    $('ul.tabs-style1 li, ul.tabs-style2 li, ul.tabs-style3 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs-style' + tab_id+ ' li').removeClass('current');
        $('.tab-content-style' + tab_id).removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})

我建议，将一个类用于特定目的tabs-style，例如tabs-style1, tabs-style2, tabs-style3

score -1 · Accepted Answer

你的编号课程并不漂亮。这是假设 data-tab 属性与 style# 数字无关。

<script>

$('ul.tabs-style1 li, ul.tabs-style2 li, ul.tabs-style3 li').click(function () {

    var tab_id = $(this).data('tab');

    $(this) .removeClass('current')
            .add("#" + tab_id)
            .addClass('current');

    $(this).attr('class').split(' ').forEach(function(cl){
        var re = /tabs-style(\d)/.exec(cl);
        if (re[1]) $('.tab-content-style' + re[1]).removeClass('current');
    });

});

</script>

score -1 · Accepted Answer

每个人似乎都想“修复”您的 jQuery 代码......但我相信 OP 问题的答案非常简单......脚本不应位于单独的脚本块中。像这样...

<!--Tabs-->
<script>
$(document).ready(function () {
    $('ul.tabs-style1 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs-style1 li').removeClass('current');
        $('.tab-content-style1').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })

    $('ul.tabs-style2 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs-style2 li').removeClass('current');
        $('.tab-content-style2').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })

    $('ul.tabs-style3 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs-style3 li').removeClass('current');
        $('.tab-content-style3').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})
</script>

score -2 · Accepted Answer

$(document).ready(function () { // this fires when the page is ready, and executes the contained code.
    for(var i = 1; i <= 3; i++){ //this runs 3 times.
        $('ul.tabs-style'+i+' li').click(function () {//This sets the callback
            var tab_id = $(this).attr('data-tab');
            $('ul.tabs-style'+i+' li').removeClass('current');
            $('.tab-content-style'+i).removeClass('current');
            $(this).addClass('current');
            $("#" + tab_id).addClass('current');
        })
    }
})

这是在不重新设计的情况下压缩此代码的正确方法。您可以轻松添加和删除

您不能使用单个类名，因为该类用于区分选项卡组。

javascript - 如何将我的 JQuery 函数压缩为一个块？

4 回答 4

Related

Reference