如何在手风琴的 h3 headers 上切换文本

Question

我的 h3 headers 用作 jquery-driven 手风琴的触发器。我希望能够附加单词“（单击我）”，以便在单击 header 时打开和关闭该短语。（单击时删除单词，在 "off" 时附加它们）。代码，正如所写的那样，工作得很好......除了它将找到的第一个 h3 的文本放入所有 headers 中。（"Header One" 和 "Header Two" 变成 "Header One (click me)" 和 "Header One (click me)." 我猜我需要某个版本的 "foreach" - 但它让我难住了。

我受到此处信息的启发 in this example - 但它的不同之处足以让我发现自己在适应过程中停滞不前。

(function($) {
$(document).ready(function(){

$(".ui-accordion-header").not('.ui-state-active').append(' (click me)');

$(".ui-accordion-header").click(function () {

var originaltext = $(this).text();             
var replacetext = " (click me)";      
var newtext = originaltext.replace(replacetext,'');

$(".ui-accordion-header").text(newtext);

$(".ui-accordion-header").append(' (click me)');

$(".ui-accordion-header.ui-state-active:contains('lick')").text(newtext);
});

});

})(jQuery);

Answer 1

如果我理解正确的话，我认为你的问题是你将点击的 header 的文本放入所有 header 中。尝试 this:

(function($) {
    $(document).ready(function(){

        $(".ui-accordion-header").not('.ui-state-active').append(' (click me)');

        $(".ui-accordion-header").click(function () {

            $(".ui-accordion-header").each(function(){

                var originaltext = $(this).text();             
                var replacetext = " (click me)";      
                var newtext = originaltext.replace(replacetext,'');
                $(this).text(newtext);
            });

            $(".ui-accordion-header").not('.ui-state-active').append(' (click me)');
        });    
    });    
})(jQuery);

如何在手风琴的 h3 headers 上切换文本

How to toggle text on h3 headers of accordion

javascript

jquery

click

accordion

toggle