如何以更精简的方式编写jQuery代码?

How can I do this jQuery code in a more reduced way?

本文关键字：方式编 jQuery 代码      更新时间：2023-09-26

我有以下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是Homediv。这看起来不错，但如果我想添加一个新框，例如，#register，我必须在这里添加代码，并在每个其他框代码(#public, #login和#faq)上添加代码:$('#register').slideUp(200);有没有什么方法可以简化并使所有人都通用?

编辑:jsFiddle链接这里的例子

你可以给这三个元素一个类并使用它来操作它们("public"， "login"answers"faq"元素)，或者:

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

然后你可以从所有的"。菜单部分"div"，将"selected"添加到新选中的菜单中，然后将所有其他菜单向上滑动:

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

这里有一个不同的解决方案。我给所有h3div一个共同的类，并选择他们与一个选择器。这样，您就不必每次添加另一个div时都更改代码。还有一个slideUp函数。现在所有的路由都可以使用相同的函数，不需要大量的匿名函数。

这是最终结果;

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

最终结果的工作示例在这里

将所有内容移到函数中将大大缩短代码。

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'); },
  });
});
相关文章：