Question

我有以下jQuery代码：

$('#menu .selected').removeClass('selected');
      $('#homel').addClass('selected');
      $('#home').slideDown(150, function() {
        $('#public').slideUp(200);
        $('#login').slideUp(200);
        $('#faq').slideUp(200);

      });

您可以猜测，隐藏并显示div框。在该示例中，#homel是Home链接，#home是主div。这看起来不错，但是如果我想添加一个新框，例如#register，我必须在此添加其他每个框代码（#public，#login和{{1}代码：#faq 有没有什么方法可以简化并为所有人制作通用的？

编辑：示例here

的jsFiddle链接

Answer 1

那么你可以把这三件事分给一个班级并用它来操作它们（“公共”，“登录”和“常见问题”元素），或者：

$('#public, #login, #faq').slideUp(200);

如果你给这些东西上课，那么你只需要说

$('.slideMeUp').slideUp(200);

或其他什么。如果您只想影响外部容器内的那些：

$('#home').slideDown(300, function() {
  $(this).find('.slideMeUp').slideUp(200);
});

编辑 - 啊好了，现在我看看你的标记我看到了什么交易。在这种情况下，我个人会使用“data-”属性将菜单中的<a>元素与它们应该控制的页面部分相关联。为此，菜单标签将如下所示：

<a href="./#/home" class="menu-item selected" id="homel" data-section='home'>Home</a>

页面部分也应该有一个类：

    <div id="home" class='menu-section'>
        <h3>Welcome</h3>
    </div>

现在，我不熟悉“路由”插件的工作方式，但这应该会让控制事情变得容易多了。如果你有一个菜单标签的引用，那么你可以获得它控制的页面部分的“id”值：

    var sectionId = $(menuItem).data('section');

然后你可以从所有“.menu-section”div中删除“selected”类，将“selected”添加到新选择的那个，然后将所有其他的向上滑动：

    $('.content .menu-section:not(.selected)').slideUp(200);

Answer 2

Here是另一种解决方案。我给所有h3 div一个公共类，并用一个选择器选择它们。这样，您每次添加另一个div时都不必更改代码。 slideUp还有一个功能。现在所有路由都可以使用相同的功能，不需要大量的匿名功能。

这是最终结果;

<强> HTML

<div id="menu">
    <a href="./#/home" class="selected" id="homel">Home</a> <a href="./#/public" id="publicl">Public</a> <a href="./#/users/login" id="loginl">Login</a> <a href="./#/faq" id="faql">FAQ</a>
</div>
<div id="content">
    <div id="home" class="h3div">
        <h3>Welcome</h3>
    </div>
    <div id="public"class="h3div">
        <h3>Public</h3>
    </div>
    <div id="login"class="h3div">
        <h3>Login</h3>
    </div>
    <div id="register"class="h3div">
        <h3>Register</h3>
    </div>
    <div id="faq" class="h3div">
        <h3>Frequently Asked Questions</h3>
    </div>
</div>

<强>的Javascript

$(document).ready(function() {
    $.routes({
        '/': function() {
            $('#home').slideDown(200);
        },
        '/home': function() {
            menuSlideUpDown('home');
        },
        '/public': function() {
            menuSlideUpDown('public');
        },
        '/users/:what': function(params) {
            if (params.what == "login") {
                menuSlideUpDown('login');
            } else if (params.what == "register") {
                menuSlideUpDown('login');
            }
        },
        '/faq': function() {
            menuSlideUpDown('faq');
        }
    });
});

function menuSlideUpDown(item) {
    $('#menu a').removeClass('selected').filter('#' + item + 'l').addClass('selected');
    $('#' + item).slideDown(150, function() {
        $('.h3div').not(this).slideUp(150);
    });
}

最终结果的工作示例是here。

Answer 3

将所有内容移动到函数中会显着缩短代码。

function collapse(e)
{
    $('#menu .selected').removeClass('selected');
      $('#'+e+'l').addClass('selected');
      $('#'+e).slideDown(150, function() {
        e=='public' || $('#public').slideUp(200);
        e=='login' || $('#login').slideUp(200);
        e=='faq' || $('#faq').slideUp(200);
        e=='home' || $('#home').slideUp(200);
      });
}
$(document).ready(function(){
  $.routes({
    '/': function(){
      $('#home').slideDown(200);
    },
    '/home': function(){ collapse('home'); },
    '/public': function() { collapse('public'); },
    '/users/:what':function(params) {
      if(params.what == "login" || params.what == "register")
        collapse('login');
    },
    '/faq':function() { collapse('faq'); },
  });

});

如何以更简化的方式执行此jQuery代码？

编辑：示例here

3 个答案: