Czy istnieje coś takiego jak jQuery.toggle (boolean)?

Question

Dużo piszę coś podobnego do poniższego kodu. Zasadniczo przełącza element na podstawie pewnych warunków.

W poniższym przykładzie, warunek jest następujący: "Jeśli pole wyboru agree jest zaznaczone, a pole name nie jest puste".

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

Żałuję, że nie było jakiejś funkcji jQuery, która działałaby w ten sposób.

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

Czy jest coś takiego? Czy istnieją inne sposoby oprócz pierwszego przykładu, aby to zrobić w sposób mniejszy niż if-else-ish?

Answer 1

Ok, więc jestem idiotą i potrzebuję RTM, zanim zadaję pytania.

jQuery.toggle() pozwala to zrobić po wyjęciu z pudełka.

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

Answer 2

Możesz napisać tę funkcję samodzielnie.

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

następnie używać go tak:

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

Answer 3

pierwsze, pozwala zobaczyć, czy rozumiem, co chcesz zrobić prawidłowo ... Chcesz spojrzeć na stan pole wyboru (zaznaczone lub nie) i ukryj lub pokaż drugi dział na podstawie stanu tej wartości.

Zdefiniuj ten styl:

.noDisplay { 
    display:none; 
} 

Użyj tego JavaScript:

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

Dokumentacja z jQuery na niej można znaleźć tutaj: http://api.jquery.com/toggleClass/

Answer 4

Jeśli toggle() nie jest dobre dla ciebie (np ponieważ ożywia), można napisać mały jQuery plugin, na przykład:

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

a następnie wykorzystać go tak:

$(element).toggleIf(condition);