Ẩn / hiện phần tử có boolean

109

Tôi có xu hướng có rất nhiều thứ này trong mã của mình

if(shouldElementBeVisible)
    $element.show()
else
    $element.hide()

Có cách nào thanh lịch hơn được đóng gói bằng javascript, jquery hoặc gạch dưới không? Lý tưởng nhất là tôi muốn một cái gì đó giống như thế này

$element.showOrHideDependingOn(shouldElementBeVisible)

— Aakil Fernandes
nguồn

jQuery hiển thị hoặc ẩn

— George

@SpencerWieczorek câu hỏi đó xảy ra để tham khảo toggle, nhưng nó là một câu hỏi khác

— Aakil Fernandes

166

Rõ ràng bạn có thể chỉ cần chuyển một boolean cho togglehàm

$element.toggle(shouldElementBeVisible)

— Aakil Fernandes
nguồn

34

Tôi khuyên bạn nên sử dụng $element.toggle(!!shouldElementBeVisible)để tránh vô tình nhấn vào một trong các "quá tải" khác , tất nhiên trừ khi bạn rất chắc chắn rằng biến đó là giá trị boolean.

— Jeroen

7

Một lựa chọn tốt hơn có thể là $element.toggle(shouldElementBeVisible == true).

— jox

"0"và "false"được đối xử rất khác so với falsedù sao, vì vậy tôi không nghĩ rằng sự khác biệt đó thực sự quan trọng - thậm chí 0sẽ không chính xác nếu bạn muốn nó bị ẩn, vì tất cả những thời gian hoạt ảnh được đặt nhưng vẫn hiển thị lật.

— Tasgall

19

Có, có!

$element.toggle();

Không có bất kỳ tham số nào, togglechỉ cần chuyển đổi khả năng hiển thị của phần tử (ý tôi không phải là thuộc visibilitytính) và phụ thuộc vào trạng thái hiện tại của phần tử.

$element.toggle(display);

Nếu bạn gọi togglevới một tham số boolean, phần tử được hiển thị nếu nó có truevà hiddennếu nó làfalse

nguồn

— Zach Spencer
nguồn

2

Tôi đã định đánh dấu điều này là sai, sau đó tôi nhận ra rằng tham chiếu API cuối cùng cho phép bạn đặt boolean thay vì đối tượng tùy chọn.

— Aakil Fernandes

một vài dòng dưới đó: "Không có tham số, phương thức .toggle () chỉ đơn giản là chuyển đổi khả năng hiển thị của các phần tử"

— Zach Spencer

2

điều đó thực sự ngược lại với những gì tôi muốn. Tôi muốn trạng thái hiện tại của phần tử là không liên quan. Trạng thái phải dựa trên một biến boolean.

— Aakil Fernandes

@AakilFernandes Vậy biến isShownkhông liên quan đến việc $elementhiển thị hay không? Nhưng một biến riêng biệt không liên quan đến phần tử?

— Spencer Wieczorek

Vâng, xin lỗi, tôi có lẽ nên đổi tên thành isShownmột cái gì đó shouldElementBeVisibleđể làm cho nó rõ ràng hơn

— Aakil Fernandes

2

jQuery có toggle: http://api.jquery.com/toggle/

$element.toggle();

Thao tác này sẽ hiển thị phần tử nếu nó bị ẩn và ẩn nó nếu nó được hiển thị.

— Mike
nguồn

0

Chức năng .toggle()thay đổidisplay của phần tử.

Nếu bạn muốn thay đổi visibility, thay vào đó, tôi khuyên bạn nên sử dụng ?:toán tử. Đối với điều này, trên CSS của bạn, hãy đặt khả năng hiển thị thành trạng thái ban đầu và trong JS chỉ cần đặt:

    var checkboxChecked = $("#yourCheckbox").(":checked");

    $("#yourElement").css("visibility", checkboxChecked ? "visible" : "hidden");

— Mel
nguồn