2013-03-27 50 views
0

在我的應用程序類,我有一些標記,看起來像這樣使一個變量在javascript

x Beerx Winex Gummy Bears

如果你點擊「X」它應該刪除標記。

標籤的創建方式與您在下面看到的一樣,帶有一個圍繞'x'的鏈接。 <%=%>中的代碼是ruby。例如,參數化方法將使「橡皮熊」標籤變成「橡皮熊」。

<a href="#" class="link tag" data-span="<%= tag.name.parameterize %>"data-question="<%= @question.id %>" data-tag="<%= tag.name%>" >x</a> 

<span class="<%= tag.name.parameterize %>"><%= tag.name %></span> 

我在'x'鏈接上設置了JavaScript點擊事件。我可以在點擊後立即刪除'x',但我無法得到實際的標籤名稱,直到頁面刷新,這不是我想要的。爲了立即刪除tag.name,我創建了一個圍繞標記名稱的span類,它與'x'鏈接上的一個html數據屬性相同。我保存的數據屬性變量(this.span)

this.spanVariable = $(r.target).attr("data-span"); #gets the tag.name parameterize from the data-span 

例如,如果它是被點擊的軟糖熊標籤,this.spanVariable現在是「橡皮糖熊」。

然後我想清空類'Gummy-Bear'的html,所以我想要做這樣的事情來評估JavaScript變量,以便它成爲類。我以爲我可以評估#{}內JavaScript,但我想不會:(

$('.#{this.spanVariable}').html(''); 

有沒有辦法來完成我想要做的,基本上把這些變量評估,因此它可以成爲那類,也是一個jQuery對象(即我可以調用jQuery方法)

+0

如有必要,您可以簡單地使用複選框和較少頭痛的標籤和風格。 – elclanrs 2013-03-27 06:28:38

+0

jQuery.next()怎麼樣? – Garrett 2013-03-27 06:32:42

+0

試試@GW jQuery.next。 – Piyuesh 2013-03-27 06:41:40

回答

1

試試這個:

$('.' + this.spanVariable).remove(); 

這種方式應該避免競爭狀態,調用一些Ajax和做的東西,當它返回:

$('.xclass').click(function(e) { 
    var spanVariable = $(this).data("span"); 
    $.ajax("/my/server/endpoint?tag=" + spanVariable, { 
    dataType: 'json', 
    success: function(result) { 
     $('.' + result.spanVariable).remove(); 
     $('.tag[data-span=' + result.spanVariable + ']').remove(); 
    }, 
    error: function() { 
     console.log('Couldn't remove the tag...'); 
    } 
    } 
}); 
+0

然而,這與其他解決方案一起使用,我不認爲這種方式是最好的方式(完全是我的錯),因爲如果用戶嘗試在短時間內點擊多個標籤,我想知道如果在服務器端代碼響應之前,spanVariable可能會迅速改變。 – BrainLikeADullPencil 2013-03-27 07:06:29

+0

這是所有客戶端...此外,如果您擔心這一點,請使用局部變量而不是對象... – philwills 2013-03-27 07:59:27

+0

如果您使用對象進行更新在服務器端的東西,也許你應該考慮跟蹤一個數組的標籤,而不是。這樣服務器就不需要跟上客戶端。 – philwills 2013-03-27 08:48:10

1

你也許混合服務器和客戶端 嘗試

$('.'+this.spanVariable).empty(); 
+0

你是對的。我迷惑了服務器和客戶端。然而,這與其他解決方案一起使用,我不認爲這種方式是最好的方式(完全是我的錯),因爲如果用戶嘗試在短時間內點擊多個標籤,我想知道是否在服務器端代碼響應之前,spanVariable可能會快速變化,從而達不到預期的效果。 – BrainLikeADullPencil 2013-03-27 07:07:06

相關問題