javascript - Jquery Animation Second Photoが表示されない

Question

2 番目の写真をクリックして展開すると、2 番目の写真ではなく最初の写真がオーバーレイに表示されます。ここでファイルを編集したので、2 番目の写真を表示します。

ここに私が持っているコードがあります

        #expand .bio-pic2 {
        position:absolute;
        top:0;
        left:0;
    }
    #expand {
        position:absolute;
        width:1000px;
        border: 1px solid black;
        display: none;
        background-color:#ffffff;
        z-index:9999;
       height:323px;
    }
    .bio-pic2 img {
        position:absolute;
        top:0;
        left:0;
        width:323px;
    }
    .testimonial {
        position:absolute;
        top:333px;
        left:0;
        font-size:15px;
    }
    .desc {
        position:absolute;
        top:10px;
        left:333px;
    }
    .bio-pic {
        float:left;
        cursor: pointer;
        z-index:9998;
        margin:0 5px 0 0;
    }

        <div id="expand">
        <div class="test">
            <div class="bio-pic2">
                <img src="http://www.brent-ransom.com/photo-img.jpg" />
                <div class="bio-nt">
                        <h2>Name</h2>

                        <h3>Position</h3>

                </div>
            </div>
            <div class="testimonial">A testimonial!</div>
        </div>
        <div class="desc">This is a paragraph of text.</div>
    </div>

        <div class="bio-pic">
            <img src="http://www.brent-ransom.com/photo-img.jpg" />
        </div>
        <div id="expand">
            <div class="test">
                <div class="bio-pic2">
                    <img src="http://brent-ransom.com/photo2-img.jpg" />
                    <div class="bio-nt">
                            <h2>Name</h2>

                            <h3>Position</h3>

                    </div>
                </div>
                <div class="testimonial">A testimonial!</div>
            </div>
            <div class="desc">This is a paragraph of text.</div>
        </div>
        <div class="bio-pic">
            <img src="http://brent-ransom.com/photo2-img.jpg" />
        </div>

    $(".bio-pic").click(function (e) {
    e.stopPropagation();
    //$('.bio-pic2').toggle("slow");
    var menu = $("#expand");
    $(menu).show().animate({
        width: 500
    }, 1000);
});
$("#expand").click(function () {
    $(this).animate({
        width: 0
    }, 1000, function () {
        $(this).hide();
    });
})

これは、私が取り組んでいるjsfiddleへのリンクですhttp://jsfiddle.net/BrentRansom/h64CZ/1/

Answer 1

このように異なる一意のIDを持つことができます

$(".bio-pic").click(function (e) {
    e.stopPropagation();
    //$('.bio-pic2').toggle("slow");
    var menu = $("#expand-"+$(this).attr("id").split("-")[1]);
    $(menu).show().animate({
        width: 500
    }, 1000);
});
$("#expand-1, #expand-2").click(function () {
    $(this).animate({
        width: 0
    }, 1000, function () {
        $(this).hide();
    });
})

またはクラスを使用する（より良いアプローチ）

デモhttp://jsfiddle.net/h64CZ/2/

Answer 2

の 2 つの要素がありid="expand"ます。禁止されています - JavaScript がおかしくなる可能性があります。

MDNからの引用は次のとおりです。

この属性は、ドキュメント全体で一意でなければならない一意の識別子 (ID) を定義します。

Answer 3

使用する<div class="expand">

それ以外の<div id="expand">