jQuery.toggle (boolean) gibi bir şey var mı?

Question

Aşağıdaki kodlara çok benzer bir şey yazarım. Temelde bir öğeye bağlı olarak bir öğeyi değiştirir.

Aşağıdaki örnekte, "agree onay kutusu işaretliyse ve name alanı boş değil" durumudur.

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

Böyle çalışacak jQuery işlevi bir çeşit olsaydı.

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

Orada böyle bir şey var mı? Ya da daha az if-else-ish yolunda bunu yapmak için ilk örnek dışında başka yolları var mı?

Answer 1

Ok, ben bir aptalım ve soru sormadan önce RTM'ye ihtiyacım var.

jQuery.toggle() bunu kutunun dışında yapmanıza olanak tanır.

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

Answer 2

Bu işlevi kendiniz yazabilirsiniz.

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

Sonra bu gibi kullanmak: İlk

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

Answer 3

, ben doğru ne yapmak istediğini anlarsanız kontrol (Bir onay kutusu durumuna bakmak istiyorum ... görelim ya değil) ve o değerin durumuna göre ikinci bir div gösterme veya gösterme.

.noDisplay { 
    display:none; 
} 

kullanın bu JavaScript:

bu stili tanımlayın

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

üzerinde jQuery gelen belgeler burada bulunabilir: http://api.jquery.com/toggleClass/

Answer 4

toggle() size (örneğin o canlandıran çünkü), bu gibi küçük jQuery eklentisi, yazabilir için iyi değilse:

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

ve sonra bu gibi kullanmak:

$(element).toggleIf(condition);