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)- 2 番目のパラメーターは、何かを検索するコンテキストです。この関数では 'this' - それは$('img.conversationsMessagePin'). img で img を検索していますが、常に間違っています。このようなものが必要です$('img#conversationsMessagePin', $(this).closest('div.conversationsMessage'))

于 2012-11-27T03:19:34.210 に答える
0

#conversationsMessagePinこれは、画像が表示可能かどうかを確認する正しい方法です。

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

あなたのコードには他にも問題があると思いますが。

画像の表示を切り替える 1 つの方法を次に示します。

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

この最後の回答は、最初から 1 つの画像が非表示で、もう 1 つの画像が表示されていることを前提としています。

于 2012-11-27T03:21:28.897 に答える
0

.クラスセレクターであるを使用する必要があります。

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 に答える