Javascript 单击div返回到其原始内容

我试图通过单击来更改我的div的内容，但我不知道如何通过第二次单击返回到这个div的原始内容

第一次点击时，内容从“点击”变为“点击2”， 第二次单击时，内容不会更改为“单击”

Html:

<div class="button"><a href="#link1">CLICK</a></div>

脚本：

$(document).ready(function(){
   $('.button').click(function() {
      $(this).html('<a href="#link2">CLICK2</a>');
   });
});

$（文档）.ready（函数（）{
$（'.button'）。单击（函数（）{
$（this.html（“”）；
});
});

有什么想法吗？谢谢。

试试看：

$(document).ready(function(){
    $('.button').click(function() {
        if($(this).html().indexOf("CLICK2") > 0){
            $(this).html('<a href="#link">CLICK</a>');
        } else {
            $(this).html('<a href="#link2">CLICK</a>');
        }
    });
});

$（文档）.ready（函数（）{
$（'.button'）。单击（函数（）{
如果（$（this.html（）.indexOf（“CLICK2”）>0）{
$（this.html（“”）；
}否则{
$（this.html（“”）；
}
});
});

或者使用REGEX语句检查您正在处理的内容类型。

试试：

$(document).ready(function(){
    $('.button').click(function() {
        if($(this).html().indexOf("CLICK2") > 0){
            $(this).html('<a href="#link">CLICK</a>');
        } else {
            $(this).html('<a href="#link2">CLICK</a>');
        }
    });
});

$（文档）.ready（函数（）{
$（'.button'）。单击（函数（）{
如果（$（this.html（）.indexOf（“CLICK2”）>0）{
$（this.html（“”）；
}否则{
$（this.html（“”）；
}
});
});

或者使用REGEX语句检查您正在处理的内容类型。

试试：

$(document).ready(function(){
    $('.button').click(function() {
        if($(this).html().indexOf("CLICK2") > 0){
            $(this).html('<a href="#link">CLICK</a>');
        } else {
            $(this).html('<a href="#link2">CLICK</a>');
        }
    });
});

$（文档）.ready（函数（）{
$（'.button'）。单击（函数（）{
如果（$（this.html（）.indexOf（“CLICK2”）>0）{
$（this.html（“”）；
}否则{
$（this.html（“”）；
}
});
});

或者使用REGEX语句检查您正在处理的内容类型。

试试：

$(document).ready(function(){
    $('.button').click(function() {
        if($(this).html().indexOf("CLICK2") > 0){
            $(this).html('<a href="#link">CLICK</a>');
        } else {
            $(this).html('<a href="#link2">CLICK</a>');
        }
    });
});

$（文档）.ready（函数（）{
$（'.button'）。单击（函数（）{
如果（$（this.html（）.indexOf（“CLICK2”）>0）{
$（this.html（“”）；
}否则{
$（this.html（“”）；
}
});
});

---

或者使用REGEX语句来检查您正在处理的内容的类型。

您的代码在每次单击时都会重置被单击元素的html内容，切换元素的内容不是

html

方法的默认行为。您可以更改

a

子元素的属性，而不是重置元素的

innerHTML

：

$('.button').click(function () {
    $(this).children('a').attr('href', function (_, currentHref) {
        return currentHref === '#link1' ? '#link2' : '#link1';
    }).text(function (_, currentText) {
        return currentText === 'CLICK' ? 'CLICK2' : 'CLICK1';
    });
});

您还可以使用

切换

或

切换类

方法：

<div class="button">
    <a href="#link1">CLICK</a>
    <a href="#link2" class='hidden'>CLICK2</a>
</div>

---

代码会在每次单击时重置单击元素的html内容，切换元素的内容不是

html

方法的默认行为。您可以更改

a

子元素的属性，而不是重置元素的

innerHTML

：

$('.button').click(function () {
    $(this).children('a').attr('href', function (_, currentHref) {
        return currentHref === '#link1' ? '#link2' : '#link1';
    }).text(function (_, currentText) {
        return currentText === 'CLICK' ? 'CLICK2' : 'CLICK1';
    });
});

您还可以使用

切换

或

切换类

方法：

<div class="button">
    <a href="#link1">CLICK</a>
    <a href="#link2" class='hidden'>CLICK2</a>
</div>

---

代码会在每次单击时重置单击元素的html内容，切换元素的内容不是

html

方法的默认行为。您可以更改

a

子元素的属性，而不是重置元素的

innerHTML

：

$('.button').click(function () {
    $(this).children('a').attr('href', function (_, currentHref) {
        return currentHref === '#link1' ? '#link2' : '#link1';
    }).text(function (_, currentText) {
        return currentText === 'CLICK' ? 'CLICK2' : 'CLICK1';
    });
});

您还可以使用

切换

或

切换类

方法：

<div class="button">
    <a href="#link1">CLICK</a>
    <a href="#link2" class='hidden'>CLICK2</a>
</div>

---

代码会在每次单击时重置单击元素的html内容，切换元素的内容不是

html

方法的默认行为。您可以更改

a

子元素的属性，而不是重置元素的

innerHTML

：

$('.button').click(function () {
    $(this).children('a').attr('href', function (_, currentHref) {
        return currentHref === '#link1' ? '#link2' : '#link1';
    }).text(function (_, currentText) {
        return currentText === 'CLICK' ? 'CLICK2' : 'CLICK1';
    });
});

您还可以使用

切换

或

切换类

方法：

<div class="button">
    <a href="#link1">CLICK</a>
    <a href="#link2" class='hidden'>CLICK2</a>
</div>

---

使用内容数组

var i = 0,
contents = ['<a href="#link1">CLICK</a>', '<a href="#link2">CLICK2</a>'];

$(document).ready(function () {
    $('.button').click(function () {
        (i < contents.length - 1) ? i++ : i = 0;
        $(this).html(contents[i]);
    });
});

var i=0，
内容=[''，]；
$（文档）.ready（函数（）{
$（'.button'）。单击（函数（）{
（i

---

使用内容数组

var i = 0,
contents = ['<a href="#link1">CLICK</a>', '<a href="#link2">CLICK2</a>'];

$(document).ready(function () {
    $('.button').click(function () {
        (i < contents.length - 1) ? i++ : i = 0;
        $(this).html(contents[i]);
    });
});

var i=0，
内容=[''，]；
$（文档）.ready（函数（）{
$（'.button'）。单击（函数（）{
（i

---

使用内容数组

var i = 0,
contents = ['<a href="#link1">CLICK</a>', '<a href="#link2">CLICK2</a>'];

$(document).ready(function () {
    $('.button').click(function () {
        (i < contents.length - 1) ? i++ : i = 0;
        $(this).html(contents[i]);
    });
});

var i=0，
内容=[''，]；
$（文档）.ready（函数（）{
$（'.button'）。单击（函数（）{
（i

---

使用内容数组

var i = 0,
contents = ['<a href="#link1">CLICK</a>', '<a href="#link2">CLICK2</a>'];

$(document).ready(function () {
    $('.button').click(function () {
        (i < contents.length - 1) ? i++ : i = 0;
        $(this).html(contents[i]);
    });
});

var i=0，
内容=[''，]；
$（文档）.ready（函数（）{
$（'.button'）。单击（函数（）{
（i

---

如果它只与2个值有关，那么可以使用

If（…）{}else{}

。因此，您必须检查该值是否为

单击

，然后将其设置为

单击2

，否则将其设置为

单击

。因为您没有按此方式对其进行编码…请将旧内容保存在变量中，然后在第二次单击时将其放回。我尝试了它，但没有成功，或者错过了一些内容。@undefined的答案很好。感谢如果它只与2值有关，那么您可以使用

if（…）{}else{}

。因此，您必须检查该值是否为

单击

，然后将其设置为

单击2

，否则将其设置为

单击

。因为您没有按此方式对其进行编码…请将旧内容保存在变量中，然后在第二次单击时将其放回。我尝试了它，但没有成功，或者错过了一些内容。@undefined的答案很好。感谢如果它只与2值有关，那么您可以使用

if（…）{}else{}

。因此，您必须检查该值是否为

单击

，然后将其设置为

单击2

，否则将其设置为

单击

。因为您没有按此方式对其进行编码…请将旧内容保存在变量中，然后在第二次单击时将其放回。我尝试了它，但没有成功，或者错过了一些内容。@undefined的答案很好。感谢如果它只与2值有关，那么您可以使用

if（…）{}else{}

。因此，您必须检查该值是否为

单击

，然后将其设置为

单击2

，否则将其设置为

单击

。因为您没有按此方式对其进行编码…请将旧内容保存在变量中，然后在第二次单击时将其放回。我尝试了