0

クリックすると前後の画像が切り替わるスライドショーを作成しました。また、各画像のキャプションをクリックするたびに同時に変更しようとしています。個々の画像ごとに機能しますが、ユーザーが次のスライドに移動すると、テキストは前のスライドの状態のままになります。そのため、すべてのスライドが前の画像を使用して開始されたとしても、テキストが「後」と表示されているときにユーザーが次のスライドに進むと、「後」と読み続けます。

<div class="carousel-inner">
    <div class="item active">
        <img src="imgs/retouched/tattoo_before.jpg" onclick="diffImage1(this)">
        <div class="carousel-caption"><p>Before</p></div>
    </div>
    <div class="item">
        <img src="imgs/retouched/rings_before.jpg" onclick="diffImage2(this)">
        <div class="carousel-caption"><p>Before</p></div>
    </div>
    <div class="item">
        <img src="imgs/retouched/pistol_before.jpg" onclick="diffImage3(this)">
        <div class="carousel-caption"><p>Before</p></div>
    </div>
</div>

可能であれば、これらの関数のより簡潔な書き方を教えてください。（1つの関数でそれを書く方法があるに違いないと思います）。各画像で同じであるため、テキストを変更するためだけに新しい関数も作成しようとしましたが、同じ問題がありました。

function diffImage1(img) {
    if (img.src.match("_before")) {
        img.src = "imgs/retouched/tattoo_after.jpg";
        $(".carousel-caption p").html("After");
    } else {
        img.src = "imgs/retouched/tattoo_before.jpg";
        $(".carousel-caption p").html("Before");
    }
   }

    function diffImage2(img) {
        if (img.src.match("_before")) {
            img.src = "imgs/retouched/rings_after.jpg";
            $(".carousel-caption p").html("After");
        } else {
            img.src = "imgs/retouched/rings_before.jpg";
            $(".carousel-caption p").html("Before");
        }
    }

    function diffImage3(img) {
        if (img.src.match("_before")) {
            img.src = "imgs/retouched/pistol_after.jpg";
            $(".carousel-caption p").html("After");
        } else {
            img.src = "imgs/retouched/pistol_before.jpg";
            $(".carousel-caption p").html("Before");
        }
    }
4

2 に答える 2

0

このような単一の関数にそれらを結合します

$("div.carousel-inner div.item img").on("click", function(){
    if ($(this).src.match("_before")) {
        $(this).src = "imgs/retouched/pistol_after.jpg";
        $(this).parent().find("p").html("After");
    } else {
        $(this).src = "imgs/retouched/pistol_before.jpg";
        $(this).parent().find("p").html("Before");
    }
}

sonclick=ではもう必要ありませんimg

于 2014-11-17T05:15:51.597 に答える
0

find()セレクターを使用して次を検索し、pテキストを変更します

  $(img).next(".carousel-caption").find( "p").text("After");

デモ

于 2014-11-17T05:11:36.087 に答える