0

我只是想知道如何将这段代码变成一个函数，而不是像下面这样重写 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();
    });
});
4

4 回答 4

3

您可以通过添加 1 个函数来缩短代码：

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

然后，供您点击：

$(function() {
    $('.three').click(function() {
      hideAll();
      $('.brodiepage').show();
    });
});
于 2012-11-14T02:49:15.077 回答
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>​

.. 等等

更好的方法是为 Question 中的所有元素设置一个通用类，这样也可以完成工作。

于 2012-11-14T02:52:33.697 回答
2

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

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

尽管我建议您摆脱非语义类“一”、“二”等，并为所有这些类仅使用一个有意义的类，然后按索引定位您的页面元素。

于 2012-11-14T03:00:50.107 回答
2

首先，您有多个 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 的元素并显示该元素。希望有帮助！

于 2012-11-14T03:17:10.617 回答