отображение другого изображения на основе состояния связи

Question

У меня есть ссылка, которую пользователь выбирает, чтобы отобразить абзац, как только они его выбирают, я хочу, чтобы он отображал другое изображение, изначально изображение будет значком плюс (+) , чтобы визуально сообщить, что его можно щелкнуть, чтобы сместить вниз содержимое, которое будет видно, и как только он будет нажат, я хочу, чтобы он изменился на знак минуса (-), чтобы они могли щелкнуть, и он будет скользить назад и исчезать.

У меня есть slideToggle down, мне просто нужно подключить путь к файлу изображения на основе текущего состояния (отображения или скрытия) ссылки.

Пример JQuery и HTML:

<a href="#" class="slide-down">Click <img src="insert-filename-of-image"></a> 

$(document).ready(function() { 
$('.slide-down').click(function() { 
    $(".content-to-slide-down").slideToggle(100); 
}); 
}); 

Все, что мне нужно сделать, это поместить соответствующее имя файла изображения, путь в <img src="">

Любая помощь приветствуется.

Answer 1

$(document).ready(function() { 
$('.slide-down').click(function() { 
    $(".content-to-slide-down").slideToggle(100); 
    var img = $("img", this).attr("src"); 
    if(img == "plusimage-path") // or check the end of the path or similar 
    $("img", this).attr("src", "minusimage-path"); 
    else 
    $("img", this).attr("src", "plusimage-path"); 
}); 
}) 

Answer 2

Возможно, не самый чистый способ сделать это, но это то, что я в настоящее время работает на моем сайте:

$('.responseHeader').click(function(){ 
     if($(this).find('.plus').length) 
     { 
      var $expImg = $(this).find('.plus'); 
      $expImg.attr('src','/static/icons/minus_9x9.png'); 
      $expImg.addClass('minus'); 
      $expImg.removeClass('plus'); 
     } 
     else 
     { 
      var $expImg = $(this).find('.minus'); 
      $expImg.attr('src','/static/icons/plus_9x9.png'); 
      $expImg.addClass('plus'); 
      $expImg.removeClass('minus'); 
     } 
     $(this).parent().children('.responseBody').slideToggle(100);  
    }); 

Редактировать ** Вот соответствующий HTML для контекста:

<div id='responsePane'> 


     <div class='response'>  
      <div class='responseHeader'> 
       <span><img class='expanderImg plus' src='/static/icons/plus_9x9.png' alt='expand'>&nbsp Response By: </span> 
       <span> <b>Adam Jones</b> </span>   
       <div class='responseDate' style='display:inline;width:100%;'><span> &nbsp&nbsp&nbsp&nbsp&nbsp<i>2010-06-15</i> </span></div> 
      </div> 

      <div class='responseBody'> 
       <span> <b>Response: </b></span> 
       <span> Test Response </span> 
      <br /> 
      </div> 
     </div> 

     <div class='response'>  
      <div class='responseHeader'> 

       <span><img class='expanderImg plus' src='/static/icons/plus_9x9.png' alt='expand'>&nbsp Response By: </span> 
       <span> <b>John Smith</b>&nbsp<img align='top' src='/static/icons/fmlogo_16x16.png' alt='Fi-Med'> </span>   
       <div class='responseDate' style='display:inline;width:100%;'><span> &nbsp&nbsp&nbsp&nbsp&nbsp<i>2010-06-15</i> </span></div> 
      </div> 
      <div class='responseBody'> 

       <span> <b>Response: </b></span> 
       <span> Test Response </span> 
      <br /> 
      </div> 
     </div> 

Answer 3

Существует несколько разных способов сделать это. Проще всего, вероятно, просто использовать обратный вызов.

$(document).ready(function() { 
$('.slide-down').click(function() { 
    $(".content-to-slide-down").slideToggle(100, function() { 
    if ({{ whatever condition you can use to check }}) { 
     $('img').attr('src', {{ URL HERE }}); 
    } 
    else { 
     $('img').attr('src', {{ OTHER URL HERE }}); 
    } 
    }); 
}); 
}); 

Другой вариант заключается в использовании .toggle()

$(document).ready(function() { 
    $('.slide-down').toggle(function() { 
     $(this).slideDown(); 
     $('img#id_of_image_here').attr('src', 'URL to minus icon'); 
     // whatever else you want to happen on first click 
    }, 
    function() { 
     $(this).slideUp(); 
     $('img#id_of_image_here').attr('src', 'URL to plus icon'); 
     // whatever you want the other click, it will track state for you. 
    } 
    ); 
});