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>

我希望将<p>与类help的可见性切换为与所点击的按钮相同的Div。我试图使用$（this）来确定单击了哪个按钮然后我可以从那里获得正确的“帮助”元素。

问题是$(this)没有返回点击的按钮。

目前我正试图隐藏点击的按钮，如：

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

ko.applyBindings(viewModel);

这不起作用。有人可以帮忙吗？

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

Answer 2

尝试使用event.currentTarget后跟next()

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

Working example here

Answer 3

是否通过Knockout构建了fieldset中的div？（他们看起来很模糊）。如果是这样，我认为更接近MVVMish的方法是从按钮单击处理程序中提取当前绑定的项目，并将每个帮助段落的可见性绑定到该处理程序在相应项目上设置的视图模型属性，而不是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);

淘汰赛 - 获得点击的元素

4 个答案: