Question

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

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

Answer 1

您可以创建一个隐藏所有元素并显示一个特定元素的函数。然后使用一个参数来调用函数，该参数确定要显示的元素：

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

Answer 2

您还可以考虑将您的问题分开，并在“经典”元素中添加另一个类。

我的意思是在您的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的'on'：http://api.jquery.com/on/

如何缩短jQuery中的代码？

2 个答案: