Question

我知道代码中有很多重复，一旦功能正确，它就会在列表中进行重构。

我想要实现的行为是，如果页面加载时没有selectedTab，请将每个组中的第一个选项卡设置为selectedTab。如果存在selectedTab，则将其用作默认显示的div。

然而，正如你可以从小提琴中看到它不按计划工作！

如果有人有任何想法如何重构这个代码，那也很棒！

Answer 1

更改

 if($('.tabs1 .tabTrigger:not(.selectedTab)')){
                $('.tabs1 .tabTrigger:first').addClass('selectedTab');
        }

到

if ( !$('.tabs1 .tabTrigger.selectedTab').length ) {
    $('.tabs1 .tabTrigger:first').addClass('selectedTab');
}

http://jsfiddle.net/n6ub3/1/

演示

他们正在这样做（第一个代码部分），如果至少有一个标签，那么您要添加.selectedTab类未在开始时选择的组..（表示始终）

<强>更新

如需缩短版本，请查看http://jsfiddle.net/n6ub3/7/

Answer 2

您的选择器正在完成您为其编写的内容。

只要至少有一个选项卡没有选中的选项卡（在测试用例中总是如此），

$('.tabs3 .tabTrigger:not(.selectedTab)')都是正确的。

所以你应该将逻辑更改为!$('.tabs3 .tabTrigger.selectedTab').length，只有在没有selectedTab的情况下才是真的

Answer 3

通过一些非常小的更改，您可以将代码简化为：

$('.tabContent').hide();

$('.tabs').each(function(){
    if($('.tabTrigger.selectedTab',$(this)).length < 1)
        $('.tabTrigger:first').addClass('selectedTab');
});

$('.tabTrigger').click(function(){
   var content = $(this).data('content');
   $(this).parents('div').children('.tabContent').hide();
   $(this).parents('div').children('.tabTrigger').removeClass('selectedTab');
   $(this).addClass('selectedTab');
   $('#' + content).show();
});


$('.tabTrigger.selectedTab').click();

这些变化是

将周围的div上的班级更改为class="tabs。
使用相关内容div的名称添加data-content属性

实例：http://jsfiddle.net/gsTBQ/

Answer 4

WORKING DEMO with simplified code

$('.tabContent').hide();

$('.tabs').each(function(){
    var search = $(this).find('div.selectedTab').length;
    if( search === 0){
        $(this).find('.tabTrigger').eq(0).addClass('selectedTab')
    }

    var selectedIndex = $(this).find('.selectedTab').index();
    $(this).find('.tabContent').eq(selectedIndex).show();
});

$('.tabTrigger').click(function(){
   var ind = $(this).index();
    $(this).addClass('selectedTab').siblings().removeClass('selectedTab');
   $(this).parent().find('.tabContent').eq(ind).fadeIn(700).siblings('.tabContent').hide();   
});

这就是全部！你并不需要所有那些ID。看一下演示！

Answer 5

嗯，我显然有点落后于时代;但是，这是我的演示版的更新版本......

我已经更新了你的小提琴，如下面的小提琴：http://jsfiddle.net/4y3Xp/1/。

基本上我只是稍微整理了一下，并且重构我将所有内容放在一个单独的函数中，而不是让每个案例都在自己的中。这基本上只是将一个新功能放在与你正在做的类似的事情上（例如不修改你的HTML模型），但我试着清理一下，我还做了一个带有标签编号的功能。每个项目，而不是每个项目需要单独的副本。

查询的“not”部分的主要问题是该函数不返回布尔值;像所有JQuery查询一样，它返回所有匹配的节点。我刚刚更新了那部分，以返回.selected是否返回超过0的结果;如果没有，我继续调用代码来选择第一个面板。

很高兴你解决了问题：）

$(document).ready(function(){
var HandleOne = function (i) {
    var idxString = i.toString();
    var tabName = '.tabs' + idxString;
    var tabContent = tabName + ' .tabContent';

    $(tabContent).hide();

    var hasSelected = $(tabName + ' .tabTrigger.selectedTab').length > 0;
    if (!hasSelected)
        $(tabName + ' .tabTrigger:first').addClass('selectedTab');

    var selectedTabId = 
        $(tabName + ' .tabTrigger.selectedTab').attr('id');

    var selectedContentId = selectedTabId.replace('tab','content');
    $('#' + selectedContentId).show();

    $(tabName + ' .tabTrigger').click(function() {
        $(tabName + ' .tabTrigger').removeClass('selectedTab');
        $(tabName + ' .tabContent').hide();

        $(this).addClass('selectedTab');
        var newContentId = $(this).attr('id').replace('tab','content');
        $('#' + newContentId).show();
    });
}

HandleOne(1);
HandleOne(2);
HandleOne(3);
});

jQuery'not'函数给出虚假结果

5 个答案:

WORKING DEMO with simplified code