0

我有以下 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>

Javascript

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

问题是它总是显示警报“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();
    }
});

目前两者都不起作用 - 有人可以给我一个关于我在这里做错了什么的提示..

谢谢你

4

4 回答 4

0

$('img#conversationsMessagePin', this)- 第二个参数是上下文，你想在哪里找到东西。在这个函数中，'this' - 它是一个$('img.conversationsMessagePin'). 您在 img 中搜索 img 并且总是错误的。你需要这样的东西$('img#conversationsMessagePin', $(this).closest('div.conversationsMessage'))

于 2012-11-27T03:19:34.210 回答
0

这是检查图像#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();
});​

最后一个答案假设您隐藏了一个图像并开始显示一个图像。

于 2012-11-27T03:21:28.897 回答
0

你应该使用.which 是一个类选择器：

if ($('img.conversationsMessagePin').is(':visible'))
于 2012-11-27T03:24:54.450 回答
0

您正在尝试评估没有样式属性的元素的样式属性。

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

1.$('img#conversationsMessagePinActive').css('display', 'none');在你的if语句之前

2.$('img#conversationsMessagePinActive').hide();在你的if语句之前

3.<img src="images/conversations-message-control-pin-active.png" id="conversationsMessagePinActive" class="conversationsMessagePin" style="display:none;"/>

于 2012-11-27T03:27:56.700 回答