jquery - 使用 jquery 从 anchor onclick 更改图像 src？

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>

这会出现一个带有一些共享图标的小 div 框。它正在按预期工作。

我想做的是，当单击 anchor 标记时，使 anchor 标记内的图像“切换”。不幸的是，我发现执行此操作的常规 jquery 图像“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 识别出我指的是图像。我不断收到“无法调用未定义的方法‘替换’”消息。我已经尝试过 $('#share') 和 ('#share')，它们都给了我相同的消息。我对 jquery 不太熟悉，但是当在 anchor 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;
});