Jquery如何在另一个div上切换文本更改

当点击手风琴的底部链接时，我想更改顶部链接上的文本

当前，顶部链接上的文本仅在单击顶部链接时更改

下面是我的jquery

$(document).ready(function () {
    // choose text for the show/hide link - can contain HTML (e.g. an image)
    var showText = 'Hide Information';
    var hideText = 'Show Information';

    // initialise the visibility check
    var is_visible = false;

    // append show/hide links to the element directly preceding the element with a class of "toggle"
    $('.collapseLink').append('<span class="dottedBot">' + showText + '</span>');

    // hide all of the elements with a class of 'toggle'
    $('.revealBoxContents').show();

    // capture clicks on the toggle links
    $('a.collapseLink').click(function () {
        // switch visibility
        is_visible = !is_visible;

        // change the link depending on whether the element is shown or hidden
        $(this).html((!is_visible) ? showText : hideText);

        // toggle the display - uncomment the next line for a basic "accordion" style
        //$('.toggle').hide();$('a.toggleLink').html(showText);
        $(this).parent().next('.revealBoxContents').slideToggle('slow');

        // return false so any link destination is not followed
        return false;
    });

    // toggle the bottom link
    $('.collapseLink').click(function () {
        $(this).parents('.revealBoxContents').stop(true, true).slideToggle('slow');
    });
});

$（文档）.ready（函数（）{
//为显示/隐藏链接选择文本-可以包含HTML（例如图像）
var showText='隐藏信息'；
var hideText='显示信息'；
//初始化可见性检查
var为可见=假；
//使用“toggle”类将显示/隐藏链接附加到元素前面的元素
$（'.collapseLink'）。追加（''+showText+''）；
//使用“toggle”类隐藏所有元素
$（'.revealBoxContents'）.show（）；
//捕获切换链接上的单击
$（'a.collapseLink'）。单击（函数（）{
//切换可见性
is_visible=！is_visible；
//根据图元是显示还是隐藏，更改链接
$（this）.html（（！是否可见）？showText:hideText）；
//切换显示-取消注释下一行的基本“手风琴”样式
//$（'.toggle'）.hide（）；$（'a.toggleLink'）.html（showText）；
$（this）.parent（）.next（'.revealBoxContents'）.slideToggle（'slow'）；
//返回false，因此不遵循任何链接目标
返回false；
});
//切换底部链接
$（'.collapseLink'）。单击（函数（）{
$（this）.parents（'.revealBoxContents'）.stop（true，true.slideToggle（'slow'）；
});
});

这是网址

我很想知道怎么做

谢谢

---

Sat

我需要查看您页面中的标签，以便为您提供一个手持练习。基本原则如下：

设置一个函数来简化更改-看起来您已经掌握了这里的基本知识

从需要设置更改的项调用此函数

查找必须更改的元素（按ID最简单）

更改文本的实际行将如下所示：

 $("#idForItemToChange").html("You sunk my battleship!");

基本JavaScript：从控件启动函数，找到要更改的项，更改文本。

只需选择单击处理程序中的所有“同级”元素

a.collapseLink

：

$(this).parents('div.revealBoxContents').find('a.collapseLink')

此处

这是单击的链接。现在，您可以将所有链接作为一个组来处理（而不是一次只处理一个）

编辑：更多详细信息

因此，首先，您需要将is_visible变量更改为仅应用于当前链接，此时一个框将影响其他框。因此，您需要：

var is_visible = $(this).parents('div.revealBoxContents').is(':visible');

而不是现在：

$(this).html((!is_visible) ? showText : hideText);

你会写：

$(this).parents('div.revealBoxContents').find('a.collapseLink').html((!is_visible) ? showText : hideText);

酷，这几乎就是它了，但是当它再次点击时，它又会怎样改变呢。对于JavaScript中的每个事件，您都需要确定需要触发哪些事件。如果标签上可能有两个事件，则只需来回切换即可。如果是，您必须确定条件并使用条件逻辑。如果需要更改回以前的值，则必须将原始值存储在变量中，然后再更改回原来的值。如果您只是更改为不同的文本，这是相同的方法，但函数或函数分支不同。有道理？