JQuery slideToggle替换图像src

Question

当单击向上/向下箭头以滑动隐藏div时，将调用此函数。如果div被隐藏，则箭头指向下方，并在显示div时变为up。如果显示div，则箭头指向隐藏div并在div关闭时向下改变。我只是想知道是否有更有效的方法来做到这一点，或者如果这是正确的方式。谢谢。

function showInfo(info_id) { 
    var img_id = '#arrow_'+info_id; 
    var div = '#info_'+appointment_id; 
    $(div).slideToggle('normal',function() { 
     if ($(this).is(':visible')) { 
      $(img_id).attr('src',$(img_id).attr('src').replace('_down','_up')); 
     } 
     else { 
      $(img_id).attr('src',$(img_id).attr('src').replace('_up','_down')); 
     } 
    });} 

Answer 1

首先，你拥有的是完全正确的。如果你想缩短了一点，但（看来你从问题可能）和你自己的jQuery 1.4以上版本，你可以通过一个函数来.attr()，像这样：

function showInfo(info_id) { 
    $('#info_'+appointment_id).slideToggle('normal',function() { 
    $('#arrow_'+info_id).attr('src', function(i, src) { 
     return $(this).is(':visible') ? src.replace('_down','_up') 
            : src.replace('_up','_down'); 
    }); 
    }); 
} 

格式为.attr('attributeToChange, function(index, currentVal) {})，所以你可以以相当干净的方式使用函数中的当前值。

Answer 2

稍有不同的版本。

$('.accHead').click(function() { 
     var $title = this; 
     var $toggle = $(this).next(); 
     $(this).next().slideToggle('slow',function() { 
      if ($('img',$title).length > 0){ 
       $('img',$title).attr('src', function(i, src) { 
        return $toggle.is(':visible') ? src.replace('_down','_up') : src.replace('_up','_down'); 
       }); 
      } 
}); 

Answer 3

function HideShowItem(item){ 
    var liID = item.getAttribute("id"); 
    // First change the url of image  
    var imageUrl = ($('#' + liID).css('display') == "none" ? "url('images/minus.png')" : "url('images/plus.png')");  
    $('#' + liID).css("src", imageUrl); 
    //then use slidetoggle jquery function  
    $("#" + liID).find("ul").slideToggle("slow");  
}