切换多个内容并将文本添加到切换链接答案

【问题标题】：toggle multiple content and add text to the toggle link切换多个内容并将文本添加到切换链接
【发布时间】：2011-04-10 23:18:32
【问题描述】：

我在这样的页面上有大约 25 个显示/隐藏（切换）元素...

HTML：

<h2><a href="#" class="link1">Headline One</a></h2>
<div class="toggle-item-link1">content</div>

<h2><a href="#" class="link2">Headline Two</a></h2>
<div class="toggle-item-link2">content</div>

JS：

$('[class^=toggle-item]').hide();
//toggle content on click
$('[class^=link]').click(function() {
var $this = $(this);
var x = $this.attr("className");
$('.toggle-item-' + x).toggle();
$(this).text($(this).text() == 'open' ? 'close' : 'open');

所以发生的情况是 H2 文本（标题一，标题二）被完全替换为文本“打开/关闭”，具体取决于切换状态。我想要做的是根据切换状态添加打开/关闭文本到实际标题。

例如：

打开标题一/关闭标题一

打开标题二/关闭标题二

我只是不知道如何在这里做到这一点。任何帮助都会很棒。谢谢！

【问题讨论】：

标签： jquery toggle

【解决方案1】：

试试这样的：http://jsfiddle.net/ZgyAx/

这是它的代码：

$('[class^=toggle-item]').hide();
//toggle content on click
$('[class^=link]').click(function() {
    var $toggleItem = $('.toggle-item-' + $(this).attr("class"));
    var $toggleLink = $(this);
    $toggleItem.slideToggle(function() {
        var $stateSpan = $('<span class="state"></span>');
        $toggleItem.is(':visible') ? $stateSpan.text('Close ') : $stateSpan.text('Open ');
        $toggleLink.children('.state').remove().end().prepend($stateSpan);
    });
}).prepend($('<span class="state">Open </span>'));

我将切换开关更改为slideToggle，以便平滑地显示/隐藏文本，而不是跳开和关闭。当然，如果您愿意，可以将slideToggle 改回toggle。

为了使文本替换更容易，它将打开/关闭文本包装在 <span> 中，并带有一个可以快速抓取它的类。然后为了简单起见，它会测试切换项的可见性，并使用它来确定是打开还是关闭。请注意，这必须在slideToggle 的回调中完成，因为在动画完成之前可见性测试不会准确。最后，只需删除任何现有的打开/关闭状态文本，然后插入新的。

【讨论】：

这真是太棒了！在我实际切换之前，我只需要显示“打开”的文本。现在它在我关闭 div 后显示。谢谢谢谢！
我已经更新了我的答案和现场演示。只需在点击绑定后添加 .prepend($('Open ')) 即可。

【解决方案2】：

为了简单起见，我将打开/关闭文本放在一个跨度中，并引用：

示例： http://jsfiddle.net/8TXDM/1/

HTML

<h2><a href="#" class="link1"><span>Open</span> Headline One</a></h2>
<div class="toggle-item-link1">content</div>

<h2><a href="#" class="link2"><span>Open</span> Headline Two</a></h2>
<div class="toggle-item-link2">content</div>

jQuery

$('[class^=toggle-item]').hide();

$('[class^=link]').click(function() {
    $('.toggle-item-' + this.className).toggle();
    $('span',this).text(function(i,txt) {
        return txt === "Open" ? "Close" : "Open";
    });
});

另外，不是每次都从 DOM 中选择 .toggle-item- 元素，我可能只是遍历那里。

示例： http://jsfiddle.net/8TXDM/2/

$('[class^=link]').click(function() {
    $('span', this).text(function(i, txt) {
        return txt === "Open" ? "Close" : "Open";
    }).end().parent().next().toggle();
});

【讨论】：

【解决方案3】：

如果您的布局与问题中的一样，则可以相对查找元素，而不是按类查找。此外，将文本包装在另一个元素中以便于更改会更容易，如下所示：

$('h2 + div').hide();
$('h2 a').prepend('<span>Open</span> ');

$('h2 a').click(function(e) {
    var vis = $(this).parent().next().toggle().is(':visible');
    $(this).find('span').text(vis ? 'Close' : 'Open');
    e.preventDefault();
});

You can give it a try here.

【讨论】：

【解决方案4】：

您可以使用$('#id').append() 向元素添加内容。如果您将 a 附加到一个类中，您可以稍后使用 $('.class #id').remove() 删除它。

根据需要使用您自己的选择器 :-) 您还可以使用 $('#id').text('my_text) 函数在元素中设置文本。或者如果你需要设置它的 HTML $('#id').html('my_html').

【讨论】：