Esiste qualcosa come jQuery.toggle (booleano)?

Question

Scrivo molto simile al seguente codice. Fondamentalmente commuta un elemento in base ad alcune condizioni.

Nell'esempio seguente, la condizione è "Se la casella di controllo agree è selezionata e il campo name non è vuoto".

$("button").click(function() { 
    if ($("#agree").is(":checked") && $("#name").val() != "") { 
    $("#mydiv").show(); 
    } else { 
    $("#mydiv").hide(); 
    } 
}); 

Vorrei che esistesse una sorta di funzione jQuery che avrebbe funzionato in questo modo.

$("button").click(function() { 
    var condition = $("#agree").is(":checked") && $("#name").val() != ""); 
    $("#mydiv").toggle(condition); 
}); 

C'è qualcosa di simile là fuori? O ci sono altri modi oltre al primo esempio per farlo in un modo meno if-else-ish?

Answer 1

Ok, quindi sono un idiota e necessità di RTM prima di fare domande.

jQuery.toggle() consente di eseguire questa operazione fuori dalla scatola.

$("button").click(function() { 
    var condition = $("#agree").is(":checked") && $("#name").val() != ""); 
    $("#mydiv").toggle(condition); 
}); 

Answer 2

È possibile scrivere autonomamente la funzione.

function toggleIf(element, condition) { 
    if (condition) { element.show(); } 
    else { element.hide(); } 
} 

poi usarlo in questo modo:

toggleIf($("button"), $("#agree").is(":checked") && $("#name").val() != ""); 

Answer 3

In primo luogo, vediamo se ho capito quello che si vuole fare in modo corretto ... Si vuole guardare lo stato di una casella di controllo (selezionata o non) e nascondere o mostrare un secondo div in base allo stato di quel valore.

Definire questo stile:

.noDisplay { 
    display:none; 
} 

Utilizzare questa JavaScript:

$("button").click(function() { 
    $("#mydiv").toggleClass("noDisplay", $("#name").val() == ""); 
}); 

La documentazione da jQuery su di esso può essere trovato qui: http://api.jquery.com/toggleClass/

Answer 4

Se toggle() non è buono per voi (ad esempio, perché anima), è possibile scrivere un piccolo plugin per jQuery, in questo modo:

$.fn.toggleIf = function(showOrHide) { 
    return this.each(function() { 
    if (showOrHide) { 
     return $(this).show(); 
    } else { 
     return $(this).hide(); 
    } 
    }); 
}; 

e quindi utilizzarlo in questo modo:

$(element).toggleIf(condition);