javascript - 如何在单击时替换 anchor 标记内的文本子字符串？

Question

我有一个标签:

<a class="showrepbut" href="javascript:void(0);" data-fpost="rbox-@post.NatForumPostID">Hide 2 replies</a>

我想做这样的事情:

$('.showrepbut').click(function () {
   if ($(this).text().includes('Show')) {
       $(this).replace(/Show/g, 'Hide');
   }
   else if ($(this).text().includes('Hide')) {
       $(this).replace(/Hide/g, 'Show');
   }
});

因此当 show 出现时 show 被 hide 替换，反之亦然。显然上面的方法是行不通的。我试过 .includes、:contains .innerHTML.indexOf 等，但似乎没有任何效果。

JSFiddle here

谁能阐明我应该如何正确处理这个问题？

Answer 1

您需要替换 $(this).text() 而不是 $(this)。

 $('.showrepbut').click(function () {
            if ($(this).text().includes('Show')) {
                $(this).text($(this).text().replace(/Show/g, 'Hide'));
            }
            else if ($(this).text().includes('Hide')) {
                $(this).text($(this).text().replace(/Hide/g, 'Show'));
            }
        });