ノックアウト - 私は、次のマークアップを持ってクリックした要素

Question

を取得：

<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> 

私がクリックされたボタンと同じDivでクラスhelpと<p>の可視性を切り替えたいです。私はどのボタンがクリックされたかを判断するために$（これ）を使用しようとしています。そしてそこから正しい "ヘルプ"要素を得ることができます。

$(this)は、クリックされたボタンを返さないという問題があります。

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

ko.applyBindings(viewModel); 

これは動作しません：私は単にのようにクリックされたボタンを非表示にしようとしています現時点では

。誰でも助けてくれますか？

Answer 1

続いevent.currentTargetを使用してみてくださいjsFiddleは、一つの可能​​な解決策である：あなたはこの経由したいDOM要素をターゲットにすることができ

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

構文：

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

Answer 2

はここnext()

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

Working example here

Answer 3

フィールドセット内のdivはKnockout経由でビルドされていますか？ （彼らはテンプレートに見えます）。もしそうなら、これに近づくよりMVVM風の方法は、ボタンクリックハンドラから現在バインドされている項目を抽出し、各ヘルプ段落の可視性を、対応する項目のそのハンドラによって設定されたビューモデルプロパティにバインドすることです手続き的なUI操作。少なくとも、これは私が向かってきたパターンであり、それははるかに良い（特にWPFとSilverlightで同様のことをした後に）より良いものを見つけることです。

Answer 4

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);