jQuery的隱藏和顯示IMG - 切換功能

我有以下的HTML和jQuery但一塊其無法正常工作：jQuery的隱藏和顯示IMG - 切換功能

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(); 
    } 
});

無論是目前的工作 - 有人可以給我，我做錯了什麼在這裏小費..

三江源

來源

2012-11-27 Adam

$('img#conversationsMessagePin', this) - 第二個參數是上下文，你想在哪裏找到某些東西。在這個功能中，這是一個$('img.conversationsMessagePin')。你在img中搜索img，它總是錯誤的。你需要像這樣$('img#conversationsMessagePin', $(this).closest('div.conversationsMessage'))

來源

2012-11-27 03:19:34 AChudov

這是正確的方法來檢查，如果你的形象#conversationsMessagePin是visisble：雖然我覺得在你的代碼中的其他問題

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-27 03:21:28 3dgoo

你應該使用.這是一個類選擇：

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

來源

2012-11-27 03:24:54 bluetoft

你試圖評估一個元素沒有style屬性style屬性。你的if語句

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

3之前

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

所以，解決你的問題，你可以設置在任一方式該屬性。 <img src="images/conversations-message-control-pin-active.png" id="conversationsMessagePinActive" class="conversationsMessagePin" style="display:none;"/>

來源

2012-11-27 03:27:56

jQuery的隱藏和顯示IMG - 切換功能

回答

相關問題