0

こんにちは、私が取り組んでいる jsfiddle へのリンクです: http://jsfiddle.net/edddotcom/7NQKU/6/

アイデアは、1 つの画像をクリックするとそのコンテナが拡大し、テキストが表示されます。次に 2 番目の画像をクリックすると、最初の画像は縮小されてテキストのない状態に戻ります。

1つの画像をクリックすると、縮小する必要がある以外のすべての画像が縮小されるようにする方法が思い浮かびthisません（大きい状態の場合）

2つ以上の画像を使用するので、このルールを他のすべてのn-1画像に適用する必要があります

HTML:

<div class="row">
    <div class="container">
        <img src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg"> <span>TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE </span>

    </div>
    <div class="container">
        <img src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg"> <span>TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE </span>

    </div>
    <div class="container">
        <img src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg"> <span>TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE </span>

    </div>
</div>

CSS:

.row {
    max-width: 1500px;
}
.container {
    display: block;
    width: 200px;
    height: 116px;
    background-color: red;
    float: left;
    margin: 5px;
}
span {
    margin-top: 10px;
    margin-left: 10px;
    max-height: 100%;
    text-align: justify;
}
img {
    width:100%;
    max-width: 400px;
    min-width: 200px;
}

JavaScript:

$(document).ready(function () {
    //ON CLICK
    $("span").hide();
    $("img").toggle(function () { //fired the first time
        $(this).parent().animate({
            //FIRSTCLICK COMMAND
            height: "400px",
            width: "400px"

        }, function () {
            $(this).children("span").show();
        });
        //Enlarges container then shows text

    }, function () { // fired the second time 
        $(this).siblings("span").hide(0, '', function () {
            $(this).parent(".container").animate({
                //SECONDCLICK COMMAND
                height: "116px",
                width: "200px"
            });
        });

    }); //Hides text then contracts container

});
4

1 に答える 1

3

イベント ハンドラー内にいthisて現在の画像であると仮定すると、次のように現在の画像以外のすべての画像を選択できます。

 $(".container img").not(this)

これにより、他のすべての画像を操作できます。これらの他の画像の中で、どの画像が展開されているかを知りたい場合は、コンテナーのサイズを調べるか、展開された画像にクラスを配置できます。展開されたクラスに特別なクラスを配置すると、独自のセレクターで展開されたクラスを見つけることができます。

$(".container.expanded")

または、サイズを調べます。

$(".container").not(this).each(function() {
    if ($(this).height() > 200) {
        // this container is expanded so we need to contract it
    }
});

特定のコードでは、これを変更できるようです：

$(this).siblings("span").hide...

これに：

// within our row, find all containers except the current container
$(this).closest(".row")
    .find(".container").not($(this).closest(".container"))
    .find("span").hide...
于 2013-04-21T22:29:02.790 に答える