如何缩短jQuery中的代码？

有人可以帮我缩短这个吗？这是我能做的最好的，它的工作，但它的速度很慢！它看起来不太好。我是一个初学者，所以我知道代码不是很好，但我可以做的最好。如何缩短jQuery中的代码？

$('.classical-a-btn').click(function() { 
    $('.classical-a').show(); 
    $('.classical-b').hide(); 
    $('.classical-c').hide(); 
    $('.classical-d').hide(); 
    $('.classical-e').hide(); 
    $('.classical-f').hide(); 
    $('.classical-g').hide(); 
    $('.classical-h').hide(); 
    $('.classical-i').hide(); 
}); 
$('.classical-b-btn').click(function() { 
    $('.classical-b').show(); 
    $('.classical-a').hide(); 
    $('.classical-c').hide(); 
    $('.classical-d').hide(); 
    $('.classical-e').hide(); 
    $('.classical-f').hide(); 
    $('.classical-g').hide(); 
    $('.classical-h').hide(); 
    $('.classical-i').hide(); 
}); 
$('.classical-c-btn').click(function() { 
    $('.classical-c').show(); 
    $('.classical-b').hide(); 
    $('.classical-a').hide(); 
    $('.classical-d').hide(); 
    $('.classical-e').hide(); 
    $('.classical-f').hide(); 
    $('.classical-g').hide(); 
    $('.classical-h').hide(); 
    $('.classical-i').hide(); 
});

来源

2015-08-27 Edy Mrkos

让我知道如果你仍然面临麻烦，所以我可以帮助 – AmmarCSE

使用attribute starts with选择

$('.classical-a-btn').click(function() { 
    $('[class^="classical"]').hide(); 
    $('.classical-a').show(); 
}); 
$('.classical-b-btn').click(function() { 
    $('[class^="classical"]').hide(); 
    $('.classical-b').show(); 
}); 
$('.classical-c-btn').click(function() { 
    $('[class^="classical"]').hide(); 
    $('.classical-c').show(); 
});

如果你可以修改按钮的HTML像

<button class="classical-a-btn" data-letter="a"></button>

可以缩短它甚至进一步给一个处理像

$('[data-letter]').click(function() { 
     $('[class^="classical"]').hide(); 
     $('.classical-'+$(this).attr('data-letter')).show(); 
    });

来源

2015-08-27 21:55:04 AmmarCSE

注意，这可能会影响其他类。例如，如果你有一个古典音乐类的元素，那也是隐藏的。 – Guffa

@Guffa，是的好点。在这种情况下，OP将不得不明确地提及类名（例如在你的答案中），并避免使用@^=' – AmmarCSE

@AmmarCSE奇妙......！喜欢你的答案的最后一部分.. –

您可以创建隐藏所有这些元素并显示一个特定元素的函数。然后调用与决定显示哪些元素的参数功能：

function show(className) { 
    $('.classical-a,.classical-b,.classical-c,.classical-d,.classical-e,.classical-f,.classical-g,.classical-h,.classical-i').hide(); 
    $(className).show(); 
} 

$('.classical-a-btn').click(function() { 
    show('.classical-a'); 
}); 
$('.classical-b-btn').click(function() { 
    show('.classical-b'); 
}); 
$('.classical-c-btn').click(function() { 
    show('.classical-c'); 
});

来源

2015-08-27 22:08:11 Guffa

你也可以考虑您的分隔条件的关注了一下，并添加另一个类到你的“classical-”元素。

我的意思是添加类，你在你的JavaScript接触的一切，也许是这样的：js-classical-hideable，然后在您的JavaScript只（不CSS）用这个，像这样：

$('.classical-a-btn').on('click', function() { 
    $('.js-classical-hideable').hide(); 
    $('.classical-a').show(); 
});

然后，您可以把它更进一步，与js-classical-btn也为了您的按钮：

$('.js-classical-btn').on('click', function() { 
    $('.js-classical-hideable').hide(); 
    $('.classical-a').hide(); 
});

你甚至可以把你的目标作为一个数据属性单独目标元素通过JavaScript和CSS：

<button type='button' class='classical-btn js-classical-btn' data-target='js-classical-a'> Show A </button>

目标元素的一个例子则是：

<div class='classical js-classical-hideable js-classical-a'> content </div>

（当然，如果你是绝对100％肯定有就只能每一个我可能会把该标识符作为ID）

<div id='js-classical-a' class='classical js-classical-hideable'> content </div>

所在类别classical仅用于CSS，并且只在您的JavaScript类js-classical-a的目标。

然后你可以（把ID js-classical-a目标后要显示的点击）这意味着：

$('.js-classical-btn').on('click', function() { 
    var target = $(this).data('target'); 
    $('.js-classical-hideable').hide(); 
    $('#' + target).show(); 
});

现在你就不必担心有人改变你使用的类JavaScript来匹配另一个CSS规则或类似的东西。

只是众多方法中的一种！

编辑：你可能想使用jQuery的“上”，以及：http://api.jquery.com/on/

来源

2015-08-27 22:15:22 daniel

如何缩短jQuery中的代码？

回答

相关问题