jQuery-缩短代码 [英] jquery - shortening code

问题描述

我只是想知道如何将这段代码变成一个函数，而不是像下面这样重写6次.我对这个东西感到恐惧.我确定有办法做到这一点，我只是一无所知.任何帮助都会很棒.

I was just wondering how i can make this code into one function instead of rewriting it 6 times like i have below. I am horrible with this stuff. I am sure there is a way to do it i just have no idea. Any help would be great.

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

推荐答案

首先，您具有多个document.ready函数， 可以合并为一个.

First off you have multiple document.ready functions, which can be combined into one.

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

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

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

    });
    etc...
});

然后，如@Shivan Raptor提到的那样，您可以将显示/隐藏代码移动到一个函数中. 但是@Shivan Raptor的代码功能的问题在于它只是 隐藏所有选定的元素，这似乎并不是你的本意 试图做. 根据您所得到的信息，您似乎正在尝试执行一些选项卡之类的操作， 在其中一个上单击将显示某个选项卡部分，并在所有其他选项卡上将其隐藏.单击下一个选项卡将显示其对应的选项卡部分，并隐藏所有其他选项卡，依此类推.

then as @Shivan Raptor mentions you can move show/hide code into one function. But the problem with @Shivan Raptor's code function is that it is just hiding all your selected elements, which doesn't seem to be what you are trying to do. Based on what you've got it looks like your are trying to do something like a set of tabs, where clicking on one shows a certain tab section, and hide all the others. Clicking the next tab shows its corresponding tab section, and hides all the others, etc...

如果这就是您要使用的，我建议您为每个html元素添加一个ID.因此，不要这样做:

If that's what you are going for I would suggest adding an ID to each of your html elements. So instead of doing this:

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

执行此操作:并添加一个类，以便您可以一次轻松地将它们全部选中

do this: and add a class so you can easily select them all at once

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

然后，不要在按钮元素(或触发器的任何元素)上使用.one，.two，.three等.，请使用与您的tabContent部分之一中的ID之一匹配的类:

then instead of using .one, .two, .three, etc.. on your button elements (or whatever element your triggers are), use a class that matches one of the id's on one of your tabContent sections:

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

现在我们可以将您的jquery重写为类似这样的内容:

now we can rewrite your jquery to something like this:

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

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

now when you click on one of the buttons, the jquery will hide all elements with a class of .tabContent, which is all your sections, then it will look for an element with the corresponding id and show that one. hope that helps!

这篇关于jQuery-缩短代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！