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');
   }
});

因此，当节目出现时，节目将被隐藏，而反之亦然。显然上述情况并不奏效。我试过.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'));
            }
        });

Answer 2

您可以更新以下代码：

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

用于工作小提琴演示click here

Answer 3

这应该

$('.showrepbut').click(function () {                        
            var txt = $(this).text().indexOf("Show")> -1 ? "Hide" : "Show";
            $(this).text(txt+ "2 replies");
 });

https://jsfiddle.net/hshzp4rb/5/

Answer 4

试试这个：

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<a class="showrepbut" href="javascript:void(0);" data-fpost="rbox-@post.NatForumPostID">Hide 2 replies</a>

＆＃13;

Answer 5

它就像那样^^

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a class="showrepbut" href="javascript:void(0);" data-fpost="rbox-@post.NatForumPostID">Hide 2 replies</a>

如何在点击时替换锚标记中的文本子字符串？

5 个答案: