Jquery 如何切换花药 div 上的文本更改

Question

当单击手风琴的底部链接时，我会更改顶部链接上的文本。

目前，仅当单击顶部链接时，顶部链接上的文本才会更改。

下面是我的 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');
    });
});

这是 URL

http://satbulsara.com/NSJ-local/eqs1。 htm

很想知道如何做到这一点。

谢谢，

星期六

Answer 1

只需选择点击处理程序中的所有“同级”a.collapseLink 元素即可：

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

这里 this 是被点击的链接。现在，您可以将所有链接作为一组（而不是一次只有一个）来执行任何您想要的操作。

编辑：更多细节

所以，首先，您需要更改 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);

Answer 2

我需要查看您页面中的标签，以便为您提供手持练习。基础知识是这样的：

1. 设置一个促进更改的函数 - 看起来您已经了解了这里的基础知识
2. 从您需要启动更改的项目中调用此函数
3. 找到必须更改的元素（通过 ID 最简单）

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

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

基本 JavaScript：从控件触发函数，找到要更改的项目，更改文本。