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>上，如下所示：

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

在这种情况下，图像是调用click函数的直接后代。

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

使用jquery从锚点onclick更改图像src？

2 个答案: