Как восстановить предыдущее значение (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/

практически в первый раз нажав на ссылку Я добавил диапазон, но когда я нажимаю снова на ту же ссылку, не удаляет диапазон ...

поэтому не работает else if кода js ... потому что переменная cliccato не определена, но если есть способ восстановить предыдущее значение , все будет разрешено.

(другие решения, которые уже доказали, как создавать переменные, которые изменяют значение, основанное на количестве кликов в моем случае значительно расширит код)

Спасибо и извините за мой английский

Answer 1

Все, что вам нужно сделать, это сохранить предыдущий элемент, который был нажат. Так как вы делаете это внутри своей функции, var cliccato доступен только в этой функции, и он не существует снаружи (scoping).

Вместо этого вы можете сделать cliccato глобальной переменной, чтобы вы могли читать и обновлять значение внутри своей функции.

EDIT: как указано в @ 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(); 

}); 

Answer 2

Вы можете воспользоваться селекторов JQuery, с чем-то вроде этого

$('#block-system-main-menu').on('click', 'li', function() { 
    if (!$(this).is(".wasclicked")) { 
     $(this).append('<span> clicked</span>'); 
     $(this).addClass("wasclicked"); 
    } else { 
     $(this).find('span').remove(); 
     $(this).removeClass("wasclicked"); 
    } 
}); 

JSFiddle demo

UPDATE

Также вы можете использовать IIFE,

var cliccato = false; // now declared OUTSIDE the function 
$('#block-system-main-menu').on('click', 'li', (function (thisCliccato) { 
    return function() { 
     if (!thisCliccato) { 
      $(this).append('<span> clicked</span>'); 
     } else { 
      $(this).find('span').remove(); 
     } 
     thisCliccato = !thisCliccato; 
    } 
})(cliccato)); 

JSFiddle demo