使用 jquery 从锚点 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 框，其中有一些共享图标。它正在按预期工作。

我想做的也是在单击锚标记时使锚标记内的图像“切换”。不幸的是，我发现执行此操作的常规 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 不太熟悉，但是当在锚点 onclick 事件上调用函数时，我是否在脚本中做了一些明显错误的事情来引用图像标签？

谢谢！

Answer 1

您需要找到里面的图像，因为您的 click 处理程序位于包装它的 上，如下所示：

$('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/