在幻灯片中单击更改文本和图像

Question

我创建了一个幻灯片，可以在单击图像之前和之后切换。 我还试图获得每个图像的标题，以便每次单击时都同时更改。 它适用于每个单独的图像，但是当用户移至下一张幻灯片时，文本保持为上一张幻灯片的状态。 因此，即使所有幻灯片都使用之前的图像开始，但是当文本显示为“ After”时，如果用户前进到下一张幻灯片，它将继续读取“ After”。

<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>

如果可能的话，请让我知道更简洁的编写这些函数的方法。 （我想必须有一种方法可以在一个函数中编写它）。 我还尝试编写一个新函数来更改文本，因为每个图像都相同，但是我遇到了相同的问题：

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");
        }
    }

Answer 1

使用find（）选择器查找下一个p然后更改文本

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

演示

Answer 2

像这样将它们组合成一个函数

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

您不再需要img上的onclick=