Question

我只是想知道如何将这段代码变成一个函数，而不是像我下面那样重写它6次。我对这些东西太可怕了。我确信有办法做到这一点，我只是不知道。任何帮助都会很棒。

    (function() {
    $('.one').click(function() {
      $('.glennpage').show();
      $('.emmapage').hide();
      $('.brodiepage').hide();
      $('.laurenpage').hide();
      $('.mattpage').hide();
      $('.jeremypage').hide();
    });
  });
$(function() {
    $('.two').click(function() {
      $('.glennpage').hide();
      $('.emmapage').show();
      $('.brodiepage').hide();
      $('.laurenpage').hide();
      $('.mattpage').hide();
      $('.jeremypage').hide();
    });
});
$(function() {
    $('.three').click(function() {
      $('.glennpage').hide();
      $('.emmapage').hide();
      $('.brodiepage').show();
      $('.laurenpage').hide();
      $('.mattpage').hide();
      $('.jeremypage').hide();
    });
});
$(function() {
    $('.four').click(function() {
      $('.glennpage').hide();
      $('.emmapage').hide();
      $('.brodiepage').hide();
      $('.laurenpage').show();
      $('.mattpage').hide();
      $('.jeremypage').hide();
    });
});
$(function() {
    $('.five').click(function() {
      $('.glennpage').hide();
      $('.emmapage').hide();
      $('.brodiepage').hide();
      $('.laurenpage').hide();
      $('.mattpage').show();
      $('.jeremypage').hide();
    });
});
$(function() {
    $('.six').click(function() {
      $('.glennpage').hide();
      $('.emmapage').hide();
      $('.brodiepage').hide();
      $('.laurenpage').hide();
      $('.mattpage').hide();
      $('.jeremypage').show();
    });
});

Answer 1

您可以通过添加1个功能缩短代码：

function hideAll() {
      $('.glennpage').hide();
      $('.emmapage').hide();
      $('.brodiepage').hide();
      $('.laurenpage').hide();
      $('.mattpage').hide();
      $('.jeremypage').hide();
}

然后，点击：

$(function() {
    $('.three').click(function() {
      hideAll();
      $('.brodiepage').show();
    });
});

Answer 2

您可以在HTML中使用HTML-5数据属性..

$(function() {
    $('.one,.two,.three,.four,.five , .six ').on('click' , function() {
        $('.glennpage,.emmapage,.brodiepage,.laurenpage , 
                                .mattpage,.jeremypage ').hide() ;   
       // Hide All

        var class = $(this).data('class');
        $('.'+class).show();
    });
});

假设.one，.two是div，我会将data-class属性添加到它们。

<div class="one" data-class="glennpage" ></div>

<div class="two" data-class="emmapage" ></div>

..等等

更好的方法是在问题中为所有元素建立一个公共类，并且也应该完成所有事情。

Answer 3

这应该适用于您当前的设置：

var $names = $('.glennpage, .emmapage, .brodiepage, .laurenpage, .mattpage, .jeremypage'),
    classes = ['one', 'two', 'three', 'four', 'five', 'six'];
$.each( classes, function( i,v ) {
  $('.'+ v).click(function() { $names.hide().eq( i ).show(); });
});

虽然我建议你删除非语义类“one”，“two”等，并且只为所有这些类使用一个有意义的类，然后按索引定位页面元素。

Answer 4

首先你有多个document.ready函数，可以组合成一个。

$(function() {
    $('.one').click(function() {

    });
    $('.two').click(function() {

    });
    $('.three').click(function() {

    });
    etc...
});

然后正如@Shivan Raptor所提到的，你可以将显示/隐藏代码移动到一个功能中。但@Shivan Raptor的代码功能的问题在于它只是隐藏所有选定的元素，这似乎不是你的样子试图做。基于你得到的东西看起来你正试图做一些像一组标签，点击其中一个显示某个标签部分，并隐藏所有其他标签部分。单击下一个选项卡会显示其相应的选项卡部分，并隐藏所有其他选项卡等...

如果这就是你想要的，我建议你为每个html元素添加一个ID。所以不要这样做：

<div class='glennpage'></div>
<div class='emmapage'></div>
<div class='brodiepage'></div>
etc...

执行此操作：添加一个类，以便您可以轻松地一次性选择它们

<div id='glennpage' class="tabContent"></div>
<div id='emmapage' class="tabContent"></div>
<div id='brodiepage' class="tabContent"></div>
etc...

然后在您的按钮元素（或触发器的任何元素）上使用.one，.two，.three等，而不是使用与您的某个tabContent部分中的某个id匹配的类：

<button class="glennpage"></button>
<button class="emmapage"></button>
<button class="brodiepage"></button>
etc...

现在我们可以将你的jquery改写成这样的东西：

$('.one','.two','.three','.four','.five','.six').click(function() {
    $('.tabContent').hide();
    $(this).find('#' + $(this).attr('id')).show();
});

现在，当你单击其中一个按钮时，jquery将使用.tabContent类隐藏所有元素，这是你的所有部分，然后它将查找具有相应id的元素并显示该元素。希望有所帮助！

jquery - 缩短代码

4 个答案: