jqueryhide&；显示IMG-切换功能

我有下面的HTML和jQuery，但它不能正常工作：

HTML

<div class="conversationsMessage">
    <img src="images/conversations-message-control-pin.png" id="conversationsMessagePin" class="conversationsMessagePin" />
    <img src="images/conversations-message-control-pin-active.png" id="conversationsMessagePinActive" class="conversationsMessagePin" />
</div>

问题是它总是显示警报“2”-例如：if语句总是等于false。我还尝试了以下不同的if语句：

$('img.conversationsMessagePin').click(function() {
    alert('yep here now...');
    if ($('img#conversationsMessagePin', this).is(':visible')) {
        alert('1');
        $(this).hide();
        $('img#conversationsMessagePin', $(this).closest('div.conversationsMessage')).show();
    } else {
        alert('2');
        $(this).hide();
        $('img#conversationsMessagePinActive', $(this).closest('div.conversationsMessage')).show();
    }
});

目前两者都不起作用-有人能告诉我我做错了什么吗

---

谢谢

$（'img#conversationsMessagePin'，this）

-第二个参数是上下文，您想在其中查找内容。在这个函数“this”中，它是一个

$（'img.conversationsMessagePin'）

。您正在img中搜索img，但它总是错误的。您需要类似以下内容：

$（'img#conversationsMessagePin'，$（this）。最近（'div.conversationsMessage'））

这是检查图像

\conversationsMessagePin

是否可见的正确方法：

if ($('img#conversationsMessagePin').is(':visible'))

尽管我认为你的代码中还有其他问题

以下是切换显示图像的一种方法：

$('img.conversationsMessagePin').click(function() {
    alert('yep here now...');
    if ($('img#conversationsMessagePin').is(':visible')) {
        alert('1');
        $('img#conversationsMessagePin').hide();
        $('img#conversationsMessagePinActive').show();
    } else {
        alert('2');
        $(this).hide();
        $('img#conversationsMessagePin').show();
        $('img#conversationsMessagePinActive').hide();
    }
});​

或者更好：

$('.conversationsMessagePin').on('click', function() {
    $('.conversationsMessagePin').toggle();
});​

---

最后一个答案假设您有一个隐藏的图像和一个显示的图像作为开始。

您应该使用

这是一个类选择器：

if ($('img.conversationsMessagePin').is(':visible'))

---

您正在尝试计算没有样式属性的元素的样式属性

因此，要解决您的问题，您可以通过以下任何方式设置该属性：

1.

$（'img#conversationsMessagePinActive'）.css（'display'，'none'）在if语句之前

2.
$（'img#conversationsMessagePinActive'）.hide（）在if语句之前

3.

if ($('img.conversationsMessagePin').is(':visible'))