Question

我在页面上有大约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文本（标题一，标题二）完全被文本“打开/关闭”取代，具体取决于切换状态。我想要做的是添加打开/关闭文本到实际标题，具体取决于切换状态。

例如：

打开标题一/关闭标题一

打开标题二/关闭标题二

我只是没有看到如何做到这一点。任何帮助都会很棒。谢谢！

Answer 1

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

示例： 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();
});

Answer 2

您可以使用$('#id').append()向元素添加内容。如果您在课程中添加了一个课程，则可以稍后使用$('.class #id').remove()删除该课程。

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

Answer 3

尝试这样的事情：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的回调内完成，因为在动画完成之前，可见性测试将不准确。最后，只需删除任何现有的打开/关闭状态文本，然后插入新文本。

Answer 4

如果你的布局就像问题一样，而不是按类找到你可以找到相对的元素。将文本包装在另一个元素中以便于更改将更容易，如下所示：

$('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 个答案: