Chuyển đổi hình ảnh bằng cách sử dụng jQuery

Question

Có cách nào tốt hơn, jQuery-ish hơn để xử lý thay thế hình ảnh này không?

var image = $(obj).children("img"); 
if ($(image).attr("src") == "Images/TreeCollapse.gif") 
    $(image).attr("src", "Images/TreeExpand.gif"); 
else 
    $(image).attr("src", "Images/TreeCollapse.gif"); 

Answer 1

Tại sao đặt biến khi không cần thiết?

$(obj).children("img").toggle(
    function(){ $(this).attr("src", "Images/TreeExpand.gif"); }, 
    function(){ $(this).attr("src", "Images/TreeCollapse.gif"); } 
); 

Answer 2

Không thực sự.

Tôi biết ... câu trả lời vô cùng hữu ích. Những gì bạn đang làm là khá ngắn gọn và tôi không chắc chắn sẽ có bất cứ điều gì để làm cho nó nhiều hơn "jQueryish" như bạn yêu cầu.

bây giờ tùy thuộc vào cách bạn đang lặp qua điều này nếu bạn đang làm việc đó với nhiều trường hợp hình ảnh, đó là nơi có thể có một số tối ưu hóa jQuery.

Answer 3

Thêm jQueryish? Có lẽ! Rõ ràng hơn? Tôi không chắc!

var image = $(obj).children("img"); 
$(image).toggle(
    function() { $(image).attr("src", "Images/TreeExpand.gif");}, 
    function() { $(image).attr("src", "Images/TreeCollapse.gif");} 
); 

Answer 4

Bạn có thể làm một cái gì đó như thế này

ví dụ

$(function() 
    { 
     $(obj) 
     .children("img") 
     .attr('src', swapImage);  
    }); 

function swapImage(){ 
    return ( 
       $(this).attr('src') == "Images/TreeCollapse.gif" ? 
            "Images/TreeExpand.gif" : 
            "Images/TreeCollapse.gif"); 
} 

N.B trong câu hỏi của bạn, bạn làm $ (hình ảnh) nhiều lần. Tốt hơn nên lưu trữ bộ nhớ cache trong var ví dụ var $ image = $ (obj) .children ("img"); sau đó sử dụng hình ảnh $ từ đó vào trong

Answer 5

có thể lựa chọn:.

• Sử dụng toggleClass và đưa những hình ảnh trong stylesheet làm hình nền.
• Sử dụng 2 hình ảnh và toggle chúng.

Answer 6

ảnh đối tượng của bạn sẽ đã có một trường hợp jQuery vì vậy không có cần cho bạn để vượt qua nó thông qua $ (...) một lần nữa.

Thực hành tốt là thêm các biến là các trường hợp jquery với $ và sử dụng chúng ngay sau đó.

var $image = $(obj).children("img"); 
if ($image.attr("src") == "Images/TreeCollapse.gif") 
    $image.attr("src", "Images/TreeExpand.gif"); 
else 
    $image.attr("src", "Images/TreeCollapse.gif"); 

Answer 7

Wow. Câu trả lời đi vào, phải không? Tất cả những điều trên sẽ làm việc, nhưng bạn có thể thử điều này cho một lớp lót (đó là chưa được kiểm tra) ...

image.setAttribute("src", "Images/Tree" + ((image.getAttribute("src").indexOf("Collapse")>0) ? "Expand" : "Collapse") + ".gif"); 

Cập nhật: Tôi vừa mới thử nghiệm này và nó hoạt động, vì vậy sẽ là người bình chọn nó xuống chăm sóc để giải thích lý do tại sao họ đã làm điều đó?