javascript - 如何恢复以前的值(javascript)？

Question

是否有可能在某种程度上恢复与this相关联的先前值？

我正在创建一个动态菜单，对我来说是必要的......不幸的是代码太长，我不能把它放回这里或在 jsfiddle 上，但我创建了一个简单的例子，你明白我的意思:

<div id="block-system-main-menu">
 <ul>
    <li><a href='#'>Mappe</a></li>
    <li><a href='#'>Vulc</a></li>
    <li><a href='#'>Equa</a></li>
 </ul>
</div>

这里是js代码:

$('#block-system-main-menu').on('click', 'li', function () {


if ($(this).children('a').text() != cliccato) {

    $(this).append('<span> clicked</span>');
    alert('not equal');


} else if ($(this).children('a').text() == cliccato) {
    $(this).find('span').remove();
    alert('equal');

}
//
var cliccato = $(this).children('a').text();

});

这里是 jsfiddle: http://jsfiddle.net/ve1cd5vx/

实际上第一次点击链接时我添加了跨度，但是当我再次点击同一个链接时并没有删除跨度......

so 对js代码的else if不起作用...因为变量cliccato没有定义，但是如果有办法恢复以前的值这个，一切都解决了..

(其他解决方案已经证明如何创建根据点击次数更改值的变量，在我的案例中只会大大扩展代码)

谢谢，对不起我的英语

Answer 1

您需要做的就是存储上一个被点击的元素。由于您是在函数内部执行此操作，var cliccato仅在该函数中可用，不存在于外部(作用域)。

相反，您可以制作 cliccato一个全局变量，因此您可以读取和更新函数内的值。

编辑:正如@davcs86 所指出的，还有不添加第二个 <span> 的问题。 ，所以我添加了一行来删除所有跨度，然后再添加新的跨度来解决这个问题。

JSFiddle:https://jsfiddle.net/8rfpmts0/1/

var cliccato = null; // now declared OUTSIDE the function
$('#block-system-main-menu').on('click', 'li', function () {


    if ($(this).children('a').text() != cliccato) {
        $(this).find('span').remove(); // Don't add extra spans
        $(this).append('<span> clicked</span>');
        alert('not equal');


    } else if ($(this).children('a').text() == cliccato) {
        $(this).find('span').remove();
        alert('equal');

    }
    //
    cliccato = $(this).children('a').text();

});