Javascript HTML跨文本切换

我有一个跨度

<span id="spanActive">Show Inactive</span>

但不工作。

使用以下代码

$('#spanActive').text(($('#spanActive').text()=='Show Inactive') ? 'Hide Inactive' : 'Show Inactive');

$('#spanActive').click(function () {
    if($(this).text() == 'Show Inactive')
         $(this).text('Hide Inactive');
    else
        $(this).text( 'Show Inactive');
});

您需要在事件处理程序中使用

this

，该事件处理程序将在“

this

”中包含当前对象

在这里检查工作演示

如果您正在span的click事件处理程序中使用

此

，请尝试使用以下代码

$('#spanActive').text(($('#spanActive').text()=='Show Inactive') ? 'Hide Inactive' : 'Show Inactive');

$('#spanActive').click(function () {
    if($(this).text() == 'Show Inactive')
         $(this).text('Hide Inactive');
    else
        $(this).text( 'Show Inactive');
});

---

检查此链接上的演示

如果此代码未封装在事件处理程序中，它为什么会工作，因为

此

在其外部没有上下文

('#spanActive').on('click', function() {
     $(this).text(($(this).text()=='Show Inactive') 
                  ? 'Hide Inactive' : 'Show Inactive');
});

如果您想在事件上下文之外使用它，那么可以尝试以下方法

('#spanActive').text(function(_, txt) {
         return txt === 'Show Inactive'? 'Hide Inactive' : 'Show Inactive'
});

试一试

您的代码有一个“this”引用，它引用的是文档，而不是span。因此，请使用：

---

此

在此上下文中不起作用。。试试这个：

$('#spanActive').text(($("#spanActive").text() == 'Show Inactive') ? 'Hide Inactive' : 'Show Inactive');

---

您确定

此

是

#spanActive

元素吗？在（'#spanActive'）中添加$text（$（this）.text（）=='Show Inactive'）？'Hide Inactive'：'Show Inactive'）；

$('#spanActive').text(($("#spanActive").text() == 'Show Inactive') ? 'Hide Inactive' : 'Show Inactive');