如何简化jQuery函数？

我是jQuery新手，我想知道是否有更好、更有效的方法来编写以下代码，该代码将显示与按钮关联的表单字段，并在单击其中一个表单字段时隐藏其他两个表单字段：

$(document).ready(function() {
var frm = $('form');
var comp = $('form[name="parents"]');
var comt = $('form[name="teachers"]');
var comk = $('form[name="kids"]');
$(frm).hide();
$('button[name="parents"]').click(function(e) {
    $(comp).slideToggle(300);
    $(comt).slideUp(300);
    $(comk).slideUp(300);
    $('footer').css("border-color","#2dff1f");
    e.preventDefault();
});
$('button[name="teachers"]').click(function(e) {
    $(comt).slideToggle(300);
    $(comp).slideUp(300);
    $(comk).slideUp(300);
    $('footer').css("border-color","#23a4f2");
    e.preventDefault();
});
$('button[name="kids"]').click(function(e) {
    $(comk).slideToggle(300);
    $(comt).slideUp(300);
    $(comp).slideUp(300);
    $('footer').css("border-color","#9800ff");
    e.preventDefault();
});
if ($("form:visible").length === 0) {
$('footer').css("border-color","#000");
}
});

另外，在底部的四行中，我试图设置一个if语句，表示如果comp、comk、comt都已关闭，则更改页脚边框颜色。它只是在加载时将边框颜色变为黑色，然后再也不会这样做

编辑：以下是html结构-

<button name="parents">Parents</button>
        <form name="parents" action="share.php" method="post">
            <fieldset>
                <span style="white-space:nowrap">
                    <label for="name">Name</label>
                    <input type="text" name="name" id="name" tabindex="1"></input>
                </span>
                <span style="white-space:nowrap">
                <label for="email">Email</label>
                <input type="text" id="email" name="email" tabindex="2" onchange="emailValidation()" class="textInput validateEmail required">
                </span>
                <span style="white-space:nowrap">
                <label for="country">Country</label>
                <select name="country" id="country" tabindex="3">
                    <optgroup label="Select One">
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                    </optgroup>
                </select>
                <!--<label for="country">Country</label>
                <?php require('countries.php'); ?> -->
                </span>
                <span style="white-space:nowrap">
                <label for="zip">Zip Code</label>
                <input type="text" id="zip" name="zip" tabindex="4" class="textInput required" maxlength="5">
                </span>

                <label for="message">Message</label>
                <textarea name="message" id="message" tabindex="5"></textarea>
                <input type="submit" tabindex="6" value="share with us">
            </fieldset>
        </form>

        <button name="teachers">Teachers</button>
        <form name="teachers" action="share.php" method="post">
            <fieldset>
                <span style="white-space:nowrap">
                    <label for="name">Name</label>
                    <input type="text" name="name" id="name" tabindex="1"></input>
                </span>
                <span style="white-space:nowrap">
                <label for="email">Email</label>
                <input type="text" id="email" name="email" tabindex="2" onchange="emailValidation()" class="textInput validateEmail required">
                </span>
                <span style="white-space:nowrap">
                <label for="country">Country</label>
                <select name="country" id="country" tabindex="3">
                    <optgroup label="Select One">
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                    </optgroup>
                </select>
                <!--<label for="country">Country</label>
                <?php require('countries.php'); ?> -->
                </span>
                <span style="white-space:nowrap">
                <label for="zip">Zip Code</label>
                <input type="text" id="zip" name="zip" tabindex="4" class="textInput required" maxlength="5">
                </span>

                <label for="message">Message</label>
                <textarea name="message" id="message" tabindex="5"></textarea>
                <input type="submit" tabindex="6" value="share with us">
            </fieldset>
        </form>

        <button name="kids">Kids</button>
        <form name="kids" action="share.php" method="post">
            <fieldset>
                <span style="white-space:nowrap">
                    <label for="name">Name</label>
                    <input type="text" name="name" id="name" tabindex="1"></input>
                </span>
                <span style="white-space:nowrap">
                <label for="email">Email</label>
                <input type="text" id="email" name="email" tabindex="2" onchange="emailValidation()" class="textInput validateEmail required">
                </span>
                <span style="white-space:nowrap">
                <label for="country">Country</label>
                <select name="country" id="country" tabindex="3">
                    <optgroup label="Select One">
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                        <option>USA</option>
                    </optgroup>
                </select>
                <!--<label for="country">Country</label>
                <?php require('countries.php'); ?> -->
                </span>
                <span style="white-space:nowrap">
                <label for="zip">Zip Code</label>
                <input type="text" id="zip" name="zip" tabindex="4" class="textInput required" maxlength="5">
                </span>

                <label for="message">Message</label>
                <textarea name="message" id="message" tabindex="5"></textarea>
                <input type="submit" tabindex="6" value="share with us">
            </fieldset>
        </form>

父母
名称
电子邮件
国家
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
邮政编码
消息
教师
名称
电子邮件
国家
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
邮政编码
消息
孩子们
名称
电子邮件
国家
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
美国
邮政编码
消息

感谢您帮助我了解更多关于jQuery的信息

用于启动

$(document).ready(function() {
    var frm = $('form').hide(),
        clist = $('form[name="parents"], form[name="teachers"], form[name="kids"]'),
        colors = {parents:'#2dff1f', teachers:'#23a4f2', kids:'#9800ff'};
    // the colors could be put in the html structure and retrieved from there..
    // or they could be css rules matching the name and applied by adding/removing a class to the footer

    $('button[name="parents"], button[name="teachers"], button[name="kids"]').click(function(e) {
        e.preventDefault();

        var target = $(this).attr('name');

        clist.not('[name="'+ target +'"]').slideUp(300);
        clist.filter('[name="'+ target +'"]').slideToggle(300);

        $('footer').css("border-color", colors[target]);
    });
    if ($("form:visible").length === 0) {
        $('footer').css("border-color", "#000");
    }
});

---

更新（包括将颜色移动到类以更好地维护）

CSS

---

演示在

为所有按钮添加一个公共类，为简单起见，我将使用

btn

作为类

var formColors = {
    kids: '#9800ff',
    parents: '#2dff1f',
    teachers: '#23a4f2'

}

$('button.btn').click(function(e) {
    e.preventDefault();
    var name = this.name
    var color = $('form:visible').length ? formColors[name] : "#000";
    var thisForm = $('form[name="' + name + '"]').slideToggle(300)
    $('form').not(thisForm).slideUp(300);
    $('footer').css("border-color", color);
})

这些家伙很快…：）

不过，我还是要说：

jQuery(function($) {
    var frm = $('form').
        footer = $('footer'),
        formsArr = {
            parents: $('form[name="parents"]').data('bd-color', '#2dff1f'),
            teachers: $('form[name="teachers"]').data('bd-color', '#23a4f2'),
            kids: $('form[name="kids"]').data('bd-color', '#9800ff')
        };

    frm.hide();

    $('button[name="parents"], button[name="teachers"], button[name="kids"]').on('click', function(e){
        e.preventDefault();

        for (var i in formsArr){
            if (i != this.name)
                formsArr[i].slideUp(300);
        }

        formsArr(this.name).slideDown(300);
        footer.css( 'border-color', formsArr(this.name).data('bd-color') )
    });

    if (!$("form:visible").length) {
        footer.css("border-color","#000");
    }

});

---

如果您觉得有必要，您可以先组合如下选择器：

$（'button[name=“parents”]、button[name=“teachers”]、button[name=“kids”]）

然后在需要的地方切换

e.currentTarget（）.attr（'name'）

。如果您将

type=“button”

显式添加到

元素中，您可能可以跳过

e.preventDefault（）如果分组，您可以进一步设置所有
slideUp
调用的值一次，方法是将它们全部设置为300，然后将被调用的一个设置为0并将其滑动切换。不过，请确保不要做得过火。我在编辑中添加了html结构。谢谢你的帮助，我现在正在查看所有的回复。单击每个按钮时，这似乎不会改变页脚边框的颜色。@doobada，是的，对不起。。我用了
颜色[name]
而不是
颜色[target]
。。corrected@petrioli谢谢，这样可以改变颜色。如果所有表单都关闭了，您知道如何使用最后一个代码将页脚边框变为黑色吗？当前代码不起作用。@petrioli，这是有道理的！谢谢你教我一两件事。
$(document).ready(function() {
    var $form = $('form').hide(),
        $footer = $('footer'),
        colors = {
           parents: '#2dff1f',
           teachers: '#23a4f2',
           kids:  '#9800ff'
        };

    $('button').click(function(e) {
        var $target = $form.filter('[name="'+this.name+'"]');
        $form.not($target).slideUp();
        $this.slideToggle();
        $footer.css("border-color", colors[this.name]);
        e.preventDefault();
    });

});

var formColors = {
    kids: '#9800ff',
    parents: '#2dff1f',
    teachers: '#23a4f2'

}

$('button.btn').click(function(e) {
    e.preventDefault();
    var name = this.name
    var color = $('form:visible').length ? formColors[name] : "#000";
    var thisForm = $('form[name="' + name + '"]').slideToggle(300)
    $('form').not(thisForm).slideUp(300);
    $('footer').css("border-color", color);
})

jQuery(function($) {
    var frm = $('form').
        footer = $('footer'),
        formsArr = {
            parents: $('form[name="parents"]').data('bd-color', '#2dff1f'),
            teachers: $('form[name="teachers"]').data('bd-color', '#23a4f2'),
            kids: $('form[name="kids"]').data('bd-color', '#9800ff')
        };

    frm.hide();

    $('button[name="parents"], button[name="teachers"], button[name="kids"]').on('click', function(e){
        e.preventDefault();

        for (var i in formsArr){
            if (i != this.name)
                formsArr[i].slideUp(300);
        }

        formsArr(this.name).slideDown(300);
        footer.css( 'border-color', formsArr(this.name).data('bd-color') )
    });

    if (!$("form:visible").length) {
        footer.css("border-color","#000");
    }

});