Meteor App - auf Eingabefokus zeigen Edit-Taste, und auf Unfocus ausblenden Sie die Bearbeitungsschaltfläche

Question

Ich entwickle eine Feedback-App, und ich muss die Bearbeitungsschaltfläche in der Nähe der Eingabe zeigen, wo immer ich mich darauf konzentrieren, und auf Unschärfe I muss es verstecken. Im Folgenden ist der Quellcode:

HTML-Datei

{{#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-Datei

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

Weiter mehr, zum Beispiel, wenn ich 5 Feedback, und ein Antwort-Button auf jedes Feedback, wenn ich auf den Feedback-Button des zweiten klicken, ist es, als ob ich auf o geklickt hätte n der erste. Und das gleiche mit den anderen Feebacks.

Vielen Dank im Voraus!

Answer 1

Sie können durch die Verwendung einer einzigartigen Identität wie ihre ID, wenn eine oder andere eindeutigen Wert zwischen ihnen machen unterscheiden:

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-Datei

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