Question

我在页面顶部有一个主div，其中包含h1，p和链接。然后在下面我有许多其他div有不同的内容h3，p，a。

这些div中还包含一个单独的链接。点击此链接，我希望内容与主要部分中的内容一起切换。 e.g。

如果你看一下我创建的这个JSFiddle：https://jsfiddle.net/ow1nLh0a/3/

我似乎只能在jQuery中切换如下所示的内容 - 但这没用。

$(".this-changes").click(function () {
    $(".main-area h1").fadeOut(function () {
        $(".main-area h1").text(($(".main-area h1").text() == 'Title Goes here') ? 'Different Title' : 'Title Goes here').fadeIn();
    })
})

如果您要按其中一个较小的div中的“更改链接”文本。然后上面的h1将替换为面板中的h3，其中链接被点击与p相同，并且与按钮链接相同。我可以为1个面板做这个没有问题，但一旦它开始进入倍数就变得更加困难。我只在示例中创建了3个较小的面板（实时版本中会有很多）。

由于

Answer 1

您要做的是将句柄传递给已单击的链接，然后查找兄弟h3，然后您可以使用其html替换h1。

$(document).ready(function () {
    $(".this-changes").click(function (event) {
        h3 = $(event.target).siblings('h3')
        $(".main-area h1").fadeOut(function () {
            $(".main-area h1").text(h3.html()).fadeIn();
        })
    })
});

https://jsfiddle.net/ow1nLh0a/5/

Answer 2

我不确定我理解你的要求，但这就是我的意思：

$(document).ready(function () {
    $(".this-changes").click(function () {
            $panel = $(this).parents('.panel');
        $(".main-area > h1").fadeOut(function () {       
            $(this).html($panel.find('h3').html()).fadeIn();
        });
        $(".main-area > p").fadeOut(function () {       
            $(this).html($panel.find('p').html()).fadeIn();
        });
        $(".main-area > a").fadeOut(function () {       
            $(this).replaceWith($panel.find('a.button').clone()).fadeIn();
        });
    })
});

切换jQuery众多元素的内容

2 个答案: