Question

我有以下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();
    }
});

目前都没有 - 有人可以给我一个关于我在这里做错的提示......

三江源

Answer 1

$('img#conversationsMessagePin', this) - 第二个参数是您要查找内容的上下文。在这个函数'this'中 - 它是$('img.conversationsMessagePin')。你在img中搜索img，这总是错的。你需要这样的东西$('img#conversationsMessagePin', $(this).closest('div.conversationsMessage'))

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

在你的if语句之前

1。$('img#conversationsMessagePinActive').css('display', 'none');

在你的if语句之前

2. $('img#conversationsMessagePinActive').hide();

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

Jquery Hide＆amp;显示IMG - 切换功能

4 个答案: