Question

我设法通过点击它来更改我的div的内容，但我不知道如何通过再次点击返回到该div的原始内容。

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

Html：

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

脚本：

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

有什么想法吗？感谢。

Answer 1

试一试：

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

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

Answer 2

您的代码会在每次点击时重置点击元素的html内容，切换元素的内容不是html方法的默认行为。您可以更改innerHTML子项的属性，而不是重置元素的a：

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

您还可以使用toggle或toggleClass方法：

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

JavaScript的：

$('.button').click(function () {
    $(this).children('a').toggleClass('hidden');
});

Answer 3

使用内容数组？

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

<强> Updated Fiddle

点击它可以回到div的原始内容

3 个答案: