切换众多元素的内容jQuery

Question

我在页面顶部有一个主要 div，在本节中有 h1、p 和 link。然后在下面我有许多其他 divs，其中包含不同的内容 h3，p，a.

这些 div 中还包含一个单独的 link。单击此 link 我希望内容与主要部分中的内容切换。例如

如果你看看我创建的这个 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();
    })
})

如果您要按 1 个较小的 div 中的 'Change Link' 文本。然后上面的 h1 将替换为 link 被点击的面板中的 h3 与 p 相同，与按钮 link 相同。我可以对 1 个面板执行此操作没问题，但是一旦它开始进入多个面板，它就会变得更加困难。我只在示例中创建了 3 个较小的面板（实时版本中会有很多）。

谢谢

Answer 1

你要做的是传递一个句柄给被点击的link然后寻找兄弟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

Switching content of numerous elements jQuery

jquery

toggle