jQuery Chuyển đổi Nhà nước

Question

Đây là cách nhanh chóng và gầy của vấn đề của tôi:

$("a").toggle(function() { /*function A*/ }, function() { /*function B*/ });

Bên function A một hình thức được hiển thị. Nếu người dùng hoàn tất thành công biểu mẫu, biểu mẫu sẽ bị ẩn lại (trở về trạng thái ban đầu).

Bên trong function B cùng một biểu mẫu bị ẩn.

Lý thuyết đằng sau điều này là người dùng có thể chọn hiển thị biểu mẫu và điền vào biểu mẫu hoặc họ có thể nhấp lại và có biểu mẫu quay lại ẩn.

Bây giờ câu hỏi của tôi là thế này: hiện nay, nếu người dùng điền vào biểu mẫu thành công - và nó đi vào ẩn - người dùng sẽ phải nhấp vào liên kết hai lần trước khi trở về trạng thái bật tắt mà hiển thị biểu mẫu.

Có cách nào để đặt lại trình chuyển đổi chuyển đổi về trạng thái ban đầu của chương trình không?

Answer 1

jQuery có hai .toggle() phương pháp:

.toggle()

mỗi bộ phù hợp yếu tố Toggles. Nếu chúng được hiển thị, hãy chuyển đổi khiến chúng bị ẩn. Nếu chúng bị ẩn, hãy chuyển đổi làm cho chúng được hiển thị.

.toggle(even, odd)

Chuyển đổi giữa hai chức năng gọi mỗi nhấp chuột khác.

Trong trường hợp này bạn muốn đầu tiên. Một cái gì đó như thế này nên làm như lừa:

$("a").click(function() { 
    $("#theForm").toggle(); 
}); 

Answer 2

Ahh, đó là những điều đơn giản trong cuộc sống ...

Tôi đã sử dụng định nghĩa sau của toggle(even,odd);, nhưng tôi đã quên bao gồm trong mô tả ban đầu của tôi về vấn đề mà chức năng chuyển đổi thứ hai của tôi không chỉ ẩn biểu mẫu, mà còn phá hủy nó.

function A: Ajax tải biểu mẫu vào div được nối. Ẩn và phá hủy div trên bài đăng biểu mẫu thành công.

function B: Hủy div.

Cả hai đều nhắc tôi rằng toggle(); chỉ giao dịch với thuộc tính CSS và vì vậy nó không phù hợp với nhiệm vụ này. Nhưng sau đó tôi nhận ra rằng tôi đã không cần thiết tái nạp các hình thức trên mỗi tiểu bang "lẻ" bằng cách tiêu diệt nó khi tôi đã được thực hiện, vì vậy tôi cuối cùng đã trở lại này:

$("link").click(function() { 
    if ($(this).siblings(".form-div").length == 0) { 
     // form is not loaded; load and show the form; hide when done 
    } 
    else { 
     $(this).siblings(".form-div").toggle(); 
    } 
});

... mà làm những gì tôi muốn nó phải làm. Cảm ơn bạn đã đặt tôi thẳng về toggle();!

Answer 3

Đây là những gì tôi đã sử dụng:

$(document).ready(function() { 
    $('#listing_position').click(function() { 

    var div_form = $('#listing_position_input'); 
     if (div_form.hasClass('hide')) { 
      div_form.removeClass('hide'); 
     } else { 
      div_form.addClass('hide'); 
     } 
    }); 
}); 

Answer 4

Went với một này để tránh các lớp ẩn/hiển thị bổ sung. Tôi nghĩ rằng đây là linh hoạt hơn so với giải pháp xảo quyệt như bạn có thể bổ sung thêm các chức năng bên trong nhưng không báo cho tôi về mà tôi là một Noob

$("#clickie").click(function(){ 
    if ($("#mydiv").css("display") == "none"){ 
    $("#mydiv").show(); 
     } else { 
     $("#mydiv").hide(); 
} 

Answer 5

Bạn có thể kiểm tra trạng thái của các chuyển đổi trong jQuery bằng cách sử dụng .is(":hidden") . Vì vậy, trong mã cơ bản những gì tôi được sử dụng:

$("#div_clicked").click(function() { 
    if ($("#toggle_div").is(":hidden")) { 
    // do this 
    } else { 
    // do that 
} 
}); # add missing closing 

Answer 6

$("#div_clicked").click(function() { 
    if ($("#toggle_div").is(":visible")) { 
    // do this 
    } else { 
    // do that 
} 

Thay thế ẩn với nhìn thấy