Meteor app - 在输入焦点显示编辑按钮上，在非焦点上隐藏编辑按钮

I'm developing a feedback app, and I need to show the edit button near the edit input wherever I focus on it, and on unfocus I need to hide it. Below is the source code:

我正在开发一个反馈应用程序,我需要在我关注它的任何地方显示编辑输入附近的编辑按钮,而我需要隐藏它。以下是源代码:

HTML file

{{#if isOwner}}
  <input id="edit" class="edit" type="text" placeholder="edit" /><input type="submit" id="save" value="save" style="display:none;"/>
  {{/if}}
 <div id="replyBody" style="display:none;">
 <input type="text" id="replyText" placeholder="reply text" /><input type="submit" value="reply" style="margin-left:15px;"/>
 </div>

JS file

Template.task.events({
'focus .edit':function(event){
     $("#save").show();
 },
});

Further more, for example, if I have 5 feedbacks, and a reply button on every feedback, if I click on the second's feedback reply button it's just like i clicked on the first one. And the same with the other feebacks.

更进一步,例如,如果我有5个反馈,并且每个反馈都有回复按钮,如果我点击第二个反馈回复按钮,就像我点击第一个回复按钮一样。与其他反馈相同。

Thank you in advance!

先感谢您!

1 个解决方案

#1

You can make differentiate between them by using a unique identity like their id if any or any other unique value:

您可以通过使用唯一身份(例如任何或任何其他唯一值)来区分它们:

HTML:

{{#if isOwner}}
  <input id="{{uniqueThingHere}}_edit" class="edit" type="text" placeholder="edit" /><input type="submit" id="{{uniqueThingHere}}_save" value="save" style="display:none;"/>
{{/if}}

JS File

Template.task.events({
'focus .edit':function(event){
     var id = $(event.target).attr(id).split('_')[0];
     $("#" + id + '_save').show();
 },
});

#1