淘汰賽 - 快速點擊的元素

我有以下的加價：淘汰賽 - 快速點擊的元素

<fieldset> 
    <div> 
     <label class="editor-label">Question 1?</label> 
     <input type="text" class="editor-field" />  
     <button type="button" data-bind="click: helpClicked">Help</button> 
     <p class="help">Help 3</p> 
    </div> 
    <div> 
     <label class="editor-label">Question 2?</label> 
     <input type="text" class="editor-field" /> 
     <button type="button" data-bind="click: helpClicked">Help</button> 
     <p class="help">Help 3</p> 
    </div> 
    <div> 
     <label class="editor-label">Question 3?</label> 
     <input type="text" class="editor-field" /> 
     <button type="button" data-bind="click: helpClicked">Help</button> 
     <p class="help">Help 3</p> 
    </div> 
</fieldset>

我想切換的<p>與類help的知名度在同一個Div的點擊按鈕。我試圖用$（this）來確定哪個按鈕被點擊，然後我可以從那裏得到正確的「幫助」元素。

問題是$(this)沒有返回點擊按鈕。

此刻我想簡單地隱藏點擊按鈕，如：

var viewModel = { 
    helpClicked: function() { 
     $(this).hide();   
    } 
}; 

ko.applyBindings(viewModel);

這是行不通的。任何人都可以幫忙嗎？

來源

2012-07-09 davy

這裏是一個的jsfiddle一個可能的解決方案：

http://jsfiddle.net/unklefolk/399MF/1/

您可以針對您通過本想DOM元素語法：

var viewModel = {  
    helpClicked: function (item, event) { 
     $(event.target).hide(); 
     $(event.target).next(".help").show()    
    } 
}; 
ko.applyBindings(viewModel);

來源

2012-07-09 09:15:47

如果您使用嵌套內容的'

通過調試和檢查'arguments'對象總是可以找到參數。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments – christo8989 2017-08-15 16:57:56

嘗試使用event.currentTarget其次next()

$(event.currentTarget).next().hide();

Working example here

來源

2012-07-09 09:05:18 ManseUK

這很有用 - event.target會得到你點擊的東西。即使它是一個孩子。 currentTarget將獲得單擊處理程序附加到的元素。 – Eirinn 2013-11-15 10:23:08

event.currentTarget不適用於IE8。對於<= IE8支持，您可以使用： var target =（event.currentTarget）？ event.currentTarget：event.srcElement;' – ShitalShah 2014-01-26 20:44:32

是通過Knockout構建的fieldset中的那些div嗎？（他們看起來模板）。如果是這樣的話，我認爲更多的MVVMish方法就是從按鈕點擊處理程序中提取當前綁定的項目，並將每個幫助段落的可見性綁定到相應項目上由該處理程序設置的視圖模型屬性，而不是UI操作的過程。至少，這是我一直朝着的方向發展的模式，尤其是在WPF和Silverlight中做類似的事情之後。

來源

2012-07-09 09:17:17

This should work 

var viewModel = 
{ 
     helpClicked: function (data,element) { 
     /* 
     data is the current model passed to the button 
     element is the button currently interacting with 
    but to get the dom object equivalent of the 
    element you've to access it   
    via its currentTarget property 
    */ 
     $(element.currentTarget).hide();   
    } 
}; 

ko.applyBindings(viewModel);

來源

2017-03-11 14:38:10

淘汰賽 - 快速點擊的元素

回答

相關問題