Javascript 淘汰赛 - 获得点击元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11391932/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Knockout - Getting clicked element
提问by davy
I have the following mark-up:
我有以下标记：
<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>
I want to toggle the visibility of the the <p>with the class helpin the same Divas the clicked button. I am trying to use $(this) to determine which button was clicked and then I could get the correct "help" element from there.
我想在<p>与单击按钮help相同的类中切换 的可见性Div。我正在尝试使用 $(this) 来确定单击了哪个按钮，然后我可以从那里获得正确的“帮助”元素。
The problem is that $(this)isn't returning the clicked button.
问题是$(this)没有返回点击的按钮。
At the moment I am trying to simply hide the clicked button like:
目前我试图简单地隐藏点击的按钮，如：
var viewModel = {
helpClicked: function () {
$(this).hide();
}
};
ko.applyBindings(viewModel);
This doesn't work. Can anyone help please?
这不起作用。有人可以帮忙吗？
回答by Mark Robinson
Here is a jsFiddle with one possible solution:
这是一个带有一种可能解决方案的 jsFiddle：
http://jsfiddle.net/unklefolk/399MF/1/
http://jsfiddle.net/unklefolk/399MF/1/
You can target the DOM elements you want via this syntax:
您可以通过以下语法定位所需的 DOM 元素：
var viewModel = {
helpClicked: function (item, event) {
$(event.target).hide();
$(event.target).next(".help").show()
}
};
ko.applyBindings(viewModel); ?
回答by Manse
Try using event.currentTargetfollowed by next()
尝试使用event.currentTarget后跟next()
$(event.currentTarget).next().hide();
回答by Tom W Hall
Are those divs inside the fieldset built via Knockout? (they look templatey). If so, I think a more MVVMish way to approach this would be to extract the currently bound item from the button click handler and bind the visibility of each help paragraph to a view model property set by that handler on the corresponding item, rather than doing the UI operations procedurally. At least, this is the pattern I've been moving towards and finding it much nicer (especially after doing similar things in WPF and Silverlight).
字段集中的那些 div 是通过 Knockout 构建的吗？（它们看起来像模板）。如果是这样，我认为更 MVVMish 的方法是从按钮单击处理程序中提取当前绑定的项目，并将每个帮助段落的可见性绑定到该处理程序在相应项目上设置的视图模型属性，而不是执行程序化的 UI 操作。至少，这是我一直在努力的模式，并且发现它更好（尤其是在 WPF 和 Silverlight 中做了类似的事情之后）。
回答by Alayo Hussein
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);
