JQuery slideToggle заменяет изображение 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");    
}