javascript - 淘汰赛 - 获得点击的元素

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>的类的可见性。我正在尝试使用 $(this) 来确定单击了哪个按钮，然后我可以从那里获得正确的“帮助”元素。helpDiv

问题是$(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();   

这里的工作示例

Answer 3

字段集中的那些 div 是通过 Knockout 构建的吗？（它们看起来很模板）。如果是这样，我认为一种更 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);