Question

我创建了一个幻灯片，可以在点击图像之前和之后切换。我也试图让每个图像的标题随每次点击同时改变。它适用于每个单独的图像，但是当用户移动到下一张幻灯片时，文本保持在上一张幻灯片的状态。因此，即使所有幻灯片都使用之前的图像开始，如果用户在文本显示为“之后”时进入下一张幻灯片，则会继续显示“之后”。

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

的 DEMO

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

onclick=

上不再需要img了

单击幻灯片显示更改文本和图像

2 个答案:

的 DEMO