2015-10-30 27 views
1

是否有可能恢復與this相關的先前值?如何恢復以前的值(javascript)?

我正在創建一個動態菜單,對我來說是必要的......不幸的是,代碼太長,我不能把它帶回這裏或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未定義,但如果有辦法恢復以前的值this,它將全部解決..

(其他解決方案,已經證明如何創建變量,根據我的情況下的點擊次數更改值只會大大延長代碼)

謝謝並對不起我的英文

+0

在你的jsfiddle'cliccato'是'undefined'所以'任何text'值點擊鏈接將永遠是不同吧(和第二支將不會被執行)。 嘗試使用一個類('.js-clicked'?),當點擊發生時,然後檢查是否存在這樣的類作爲'if'中的條件。 – MarcoL

+0

另一個關於'if/else'塊的小問題是你不需要第二個'if',一個簡單的else就足夠了。 – MarcoL

回答

3

所有你需要做的就是存儲被點擊的前一個元素。既然你是在你的函數內部做的,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(); 

}); 
+0

這不符合「第一次點擊一個鏈接我添加了跨度,但是當我再次點擊相同的鏈接不會刪除跨度...」您的解決方案在同一個LI中生成多個「單擊」跨度元素,因爲你只在cliccato變量中存儲最後單擊的LI。嘗試多次點擊降序排列的所有LI元素,你會得到這個http://i.imgur.com/p1akiec.png – davcs86

+0

哎呦,好抓。爲此增加了一個修復程序。 – whrrgarbl

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