1

我是 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 的更多信息！

4

4 回答 4

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

});
于 2012-12-04T01:26:08.983 回答
0

开始

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

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

$(document).ready(function() {
    var forms = $('form').hide(),
        footer = $('footer');

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

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

        forms.not('[name="' + target + '"]').slideUp(300);
        forms.filter('[name="' + target + '"]').slideToggle(300, function(){
            // once the animation is complete
            var toggled = $(this);
            footer.removeClass(); // clear footer class
            if (toggled.is(':visible')){ // if toggle resulted in open form
                footer.addClass(target); // add class
            }
        });
    });
});

CSS

footer{
    border:1px solid #000;
}

footer.parents{
    border-color:#2dff1f;
}
footer.teachers{
    border-color:#23a4f2;
}
footer.kids{
    border-color:#9800ff;
}

演示在 http://jsfiddle.net/gaby/uLs6c/

于 2012-12-04T01:23:30.937 回答
0

为所有按钮添加一个公共类，为简单起见，我将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);
})
于 2012-12-04T01:27:22.590 回答
0

这些家伙很快...... :)

但是，这是我的返工：

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

});
于 2012-12-04T01:38:04.083 回答