JQuery slideToggle replace image src

Question

Эта функция вызывается при нажатии стрелки вверх/вниз для скрытия скрытого div. Если div скрыт, стрелка указывает вниз и изменяется вверх, когда отображается div. Если показан 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");  
}