Как я могу сделать эту функцию?

Question

Я знаю, что я должен быть в состоянии сделать это в рамках одной функции. У меня есть 2 кнопки, которые показывают 2 разных формы при нажатии. Когда кто-то переключается, другой скроется. Вот как я это делаю сейчас.

$("#newaccount_form").hide(); 
$("#newuser_form").hide(); 

$(function(){ 
$("#newaccount").on("click", function(){ 
    if ($('#newuser_form').is(":visible")) 
    { 
     $("#newuser_form").hide("slow"); 
     $("#newaccount_form").slideToggle("slow"); 
    } 
    else{ 
     $("#newaccount_form").slideToggle("slow"); 
    } 
    }); 
}); 

$(function(){ 
$("#newuser").on("click", function(){ 
    if ($('#newaccount_form').is(":visible")) 
    { 
     $("#newaccount_form").hide("slow"); 
     $("#newuser_form").slideToggle("slow"); 
    } 
    else{ 
     $("#newuser_form").slideToggle("slow"); 
    } 
    }); 
}); 

Как я могу превратить это в одну функцию? Как я могу сделать 2 элемента, попавших в одну и ту же функцию?

Answer 1

Может соответствовать ID элемента щелкнул к селекторов форм

var $forms = $("#newaccount_form, #newuser_form").hide(); 

$("#newaccount, #newuser").on("click", function(){ 
    var target_form = $('#' + this.id + '_form').slideToggle(); 
    $forms.not(target_form).slideUp(); // or hide()  
}); 

Это на самом деле не нужно, чтобы проверить :visible в случае использования анимации вместо тумблера.

DEMO

Answer 2

Использование jQuery.data() может решить эту проблему. так,

$("#newaccount").click(function(){ 
    $(this).data('pressed', true);} 
); 

Затем вы можете использовать, если заявление для проверки произвольной величины. Затем вы можете проверить его с помощью оператора if.

Answer 3

$("#newaccount_form").hide(); 
$("#newuser_form").hide(); 

$(function(){ 
    $("#newaccount").on("click", show_new_form("#newaccount_form", "#newuser_form")); 
    $("#newuser").on("click", show_new_form("#newuser_form", "#newaccount_form")); 
    function show_new_form(new_form, current_form){ 
     return (function(){ 
      if ($(current_form).is(":visible")) 
      { 
       $(current_form).hide("slow"); 
      } 
      $(new_form).slideToggle("slow"); 
     }); 
    } 
}); 

Answer 4

Попробуйте

$("#newaccount_form").hide(); 
$("#newuser_form").hide(); 

$(function(){ 
$("#newaccount,#newuser").on("click", function(){ 
    if ($('#newuser_form').is(":visible")) 
    { 
     $("#newuser_form").hide("slow"); 
     $("#newaccount_form").slideToggle("slow"); 
    } 
    else if ($('#newaccount_form').is(":visible")) 
    { 
     $("#newaccount_form").hide("slow"); 
     $("#newuser_form").slideToggle("slow"); 
    } 
    else 
    { 
     $("#"+$(this).attr("id")+"_form").slideToggle("slow"); 
    } 
    }); 
}); 

Answer 5

Допустим, что в скором времени вам нужно будет добавить больше Div, чтобы показать/скрыть. Вы должны использовать класс как селектор и скрыть все div (или любой другой элемент), прежде чем показывать тот, который запускается кнопкой. Если у вас есть что-то вроде этого:

<button class="toggle_btn" id="newaccount" data="newaccount_form">New Account</button> 
<button class="toggle_btn" id="newuser" data="newuser_form">New User</button> 

<div class="toggle red" id="newaccount_form"></div> 
<div class="toggle blue" id="newuser_form"></div> 

Вы можете контролировать его обобщенно:

$(function(){ 
    $("#newaccount_form").hide(); 
    $("#newuser_form").hide(); 

    $(".toggle_btn").click(function() { 
     $(".toggle").hide("slow"); 
     var dataSelectorId = $(this).attr("data"); 
     if ($('#' + dataSelectorId).is(":hidden")) { 
      $("#" + dataSelectorId).slideToggle("slow"); 
     } 
    }); 
}); 

Попробуйте на этом Fiddle