35

次のマークアップがあります。

<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>クラスでの可視性を切り替えたい。$(this) を使用してどのボタンがクリックされたかを判断しようとしていますが、そこから正しい「ヘルプ」要素を取得できました。helpDiv

問題は$(this)、クリックされたボタンが返されないことです。

現時点では、クリックしたボタンを次のように単純に非表示にしようとしています。

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

ko.applyBindings(viewModel);

これはうまくいきません。誰でも助けてもらえますか？

4

4 に答える 4

48

以下は、考えられる解決策の 1 つを含む 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-09T09:15:47.757 に答える
14

event.currentTarget使用してみてくださいnext()

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

ここでの実例

于 2012-07-09T09:05:18.527 に答える
3

フィールドセット内のこれらの div は Knockout を介して構築されていますか? （テンプレートのように見えます）。もしそうなら、これにアプローチするよりMVVMっぽい方法は、現在バインドされているアイテムをボタンクリックハンドラーから抽出し、各ヘルプ段落の可視性を、対応するアイテムのハンドラーによって設定されたビューモデルプロパティにバインドすることだと思います。 UI操作を手続き的に。少なくとも、これは私が目指してきたパターンであり、より優れていることがわかりました (特に WPF と Silverlight で同様のことを行った後)。

于 2012-07-09T09:17:17.100 に答える