Изменение изображения src из привязки onclick с помощью jquery?

Question

Я использую jquery, чтобы открыть окно общего доступа AddThis, когда я нажимаю ссылку, которая окружает изображение. Он отлично работает. Код JQuery Я использую здесь:

 //added to show/hide add-this 
    $('a#slick-toggle').click(function() { 
     $('#atBox').toggle(100); 
     return false; 
    }); 

И это мое отношение HTML:

<a id="slick-toggle" href="#" title="Share"> 
<img src="images/navicon/navicon4_off.gif" alt="share" id="share" class="img-swap"> 
</a> 

Это делает немного ДИВ коробка кажется, что имеет некоторые значки общего доступа. Он работает по назначению.

Что я хотел сделать, так это сделать изображение, находящееся внутри привязанных тегов, «переключатель», когда был нажат тег привязки. К сожалению, обычные сценарии jquery image «onclick», которые я нашел для этого, похоже, не работают, по-видимому, потому, что нажата «ссылка», а не изображение? Во всяком случае, я старался «не сливаясь» первоначальный сценарий с изображением подкачки сценария, выполнив следующие действия, но не повезло:

 $('a#slick-toggle').click(function() { 

     if ($('#share').attr("class") == "img-swap") { 
      this.src = this.src.replace("_off","_on"); 
     } else { 
      this.src = this.src.replace("_on","_off"); 
     } 
     $('.img-swap').toggleClass("on"); 


     $('#atBox').toggle(100); 
     return false; 
    }); 

Это, кажется, не имеет значения, что я кладу в этой третьей линии, я не могу когда-либо получайте jquery, чтобы понять, что я имею в виду изображение. Я продолжаю получать сообщение «Can not call method» replace «undefined». Я пробовал это, $ ('# share') и ('#share'), и все они дают мне то же сообщение. Я не слишком хорошо знаком с jquery, но я делаю что-то явно неправильное в своем сценарии, чтобы ссылаться на тег изображения, когда функция вызывается в событии привязки onclick?

Спасибо!

Answer 1

Вы должны найти изображение внутри, так как ваш click обработчик на <a> который оборачивает его, как это:

$('a#slick-toggle').click(function() { 
    var img = $(this).find("img")[0]; 
    if ($('#share').attr("class") == "img-swap") { 
     img.src = img.src.replace("_off","_on"); 
    } else { 
     img.src = img.src.replace("_on","_off"); 
    } 
    $('.img-swap').toggleClass("on"); 
    $('#atBox').toggle(100); 
    return false; 
}); 

Или переключить вещи немного как это:

$('a#slick-toggle').click(function() { 
    var img = $('#share')[0], isSwap = img.className == "img-swap"; 
    img.src = isSwap ? img.src.replace("_off","_on") : img.src.replace("_on","_off"); 
    $('.img-swap').toggleClass("on"); 
    $('#atBox').toggle(100); 
    return false; 
}); 

Answer 2

Другая альтернатива: попробуйте использовать .children(), чтобы выбрать дочерний элемент текущего, который вы нажали.

$(this).children('> img') 

В этом случае изображение, которое является прямым потомком того, где вызывается функция щелчка.

http://api.jquery.com/children/