如何簡化這個jQuery函數？

我是新來的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全部關閉，則更改頁腳border-color。它只是在加載時將邊框顏色變成黑色，然後再也不會再做。

編輯：下面是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的！

來源

2012-12-04 doobada

如果你覺得有必要，你可以通過選擇相結合，像這樣開始：' $（'button [name =「parents」]，button [name =「teachers」]，button [name =「kids」]'）'然後切換e.currentTarget（）。attr（'name'）'where需要。 – soulseekah

如果明確地向'

如果分組，您可以進一步設置所有」slideUp「調用的值將它們全部設置爲300，然後將被調用的值設置爲0並將它滑動。但請確保你不過分。 – soulseekah

對於開始

$(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-04 01:23:30

我在編輯中添加了html結構。感謝您的幫助，我現在正在審閱所有回覆。 – doobada

這似乎並沒有改變每個按鈕被點擊時的頁腳邊框顏色。 – doobada

@doobada，對不起..我有'顏色[名稱]'而不是'顏色[目標]'..更正 –

$(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-04 01:26:08 undefined

這似乎不適用於我的目的。 – doobada

添加一個公共類，所有的按鈕，爲簡單起見，我將使用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-04 01:27:22 charlietfl

這些傢伙是快... :)

但儘管如此，這裏是我的返工：

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-04 01:38:04

如何簡化這個jQuery函數？

回答

相關問題