Изменение изображения SRC от привязки по клику с помощью jquery? - PullRequest
Новая
       12

Изменение изображения SRC от привязки по клику с помощью jquery?

1 голос
/ 01 ноября 2010

Я использую 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>

. Появляется небольшое поле div с некоторыми значками общего доступа.Он работает как задумано.

Что я хотел сделать, так это сделать изображение, которое находится внутри тегов привязки, «переключаться» при нажатии на тег привязки.К сожалению, обычные jquery-сценарии «onclick», которые я нашел для выполнения, похоже, не работают, возможно, потому, что нажимается «ссылка», а не изображение?В любом случае, я попытался «объединить» исходный сценарий со сценарием обмена изображениями, выполнив следующие действия, но безуспешно:Я никогда не узнаю, что я имею в виду изображение.Я продолжаю получать сообщение «Невозможно вызвать метод« заменить »неопределенного».Я пробовал это, $ ('# share') и ('#share'), и все они дают мне одно и то же сообщение.Я не слишком знаком с jquery, но я делаю что-то явно неправильное в моем скрипте, чтобы ссылаться на тег изображения, когда функция вызывается для события onclick привязки?

Спасибо!

Ответы [ 2 ]

2 голосов
/ 01 ноября 2010

Вам нужно найти изображение внутри, так как ваш обработчик 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;
});
1 голос
/ 02 ноября 2010

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

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

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

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

...