0

次のコードを使用しています

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
//Document ready
$(document).ready(function(){   

    //Show info
    $('a.getinfo').live("click", function(event){
        event.preventDefault();
                $(this).css("display","none");
                $(this).next('.info').css("display","block");
        }
    );
    $('a.getback').live("click", function(event){
        event.preventDefault();
                $(this).css("display","none");
                $(this).prev('a.getinfo').css("display","block");
        }
    );



});
</script>
<style>
.info {
    display: none   
}
</style>
<ul>
    <li>
        <a href="#" class="getinfo">
            <img src="http://s13.postimage.org/7xkjh8991/image.jpg">
            <span class="sticker opacity">get info</span>
        </a>
        <div class="info">
        <a href="#" class="getback">
            some info
            <span class="sticker-back opacity">back</span>
        </a>
        </div>
    </li>
    <li>
        <a href="#" class="getinfo">
            <img src="http://s13.postimage.org/7xkjh8991/image.jpg">
            <span class="sticker opacity">get info</span>
        </a>
        <div class="info">
        <a href="#" class="getback">
            some info
            <span class="sticker-back opacity">back</span>
        </a>
        </div>
    </li>
    <li>
        <a href="#" class="getinfo">
            <img src="http://s13.postimage.org/7xkjh8991/image.jpg">
            <span class="sticker opacity">get info</span>
        </a>
        <div class="info">
        <a href="#" class="getback">
            some info
            <span class="sticker-back opacity">back</span>
        </a>
        </div>
    </li>
</ul>

何をすべきか：

  • 画像をクリックすると、画像が非表示になり、「some info back」というテキストが表示されます。
  • 「some info back」というテキストをクリックすると、前の画像が表示されるはずです

問題：

  • 画像を表示することができません。おそらく、クラス「.getinfo」を適切に選択する方法がわかりません
4

2 に答える 2

2

あなたは正しい選択をしていません。これは、正しく機能するコードの修正版です: http://jsfiddle.net/ertaD/4/

select を変更して最も近い li を取得し、その中で必要な要素を見つけました。.getback を非表示にし、.info を表示していました (info の内容は非表示のままでした)

コードは次のとおりです。

$('a.getinfo').live("click", function(event){
    event.preventDefault();
            $(this).css("display","none");
            $(this).closest('li').find('.info').css("display","block");
    }
);
$('a.getback').live("click", function(event){
    event.preventDefault();
            $(this).parent().css("display","none");       
            $(this).closest('li').find('.getinfo').css("display","block");
    }
);
于 2012-05-08T11:25:49.383 に答える
0

Prev以前のすべての div を検索するわけではないため、セレクターは使用しないでください。parentおよびchildrenセレクターを試してください。

$('a.getinfo').live("click", function(event){
    event.preventDefault();
            $(this).hide();
            $(this).parent().children('.info').show();
    }
);
$('a.getback').live("click", function(event){
    event.preventDefault();
            $(this).parent().hide();
            $(this).parent().parent().children('.getinfo').show();
    }
);​

css属性を設定するよりも物事を簡単にするために、Showおよびメソッドも使用したことに注意してくださいHide

これが実際の例です

二重の親を使用する必要がないため、このインスタンスでセレクター.parent().parent()を使用して、次のように、特定のセレクタークエリに一致する最初の親を見つける方が適切です。closest

$(this).closest("li").children('.getinfo').show();
于 2012-05-08T11:26:34.083 に答える