私がクリックした要素のインデックスを取得するには

Question

私はコンテナのリストを持っており、私たちがターミナルロゴをクリックしたコンテナにターミナルを表示するボタンを追加したいと思います。

しかし、リストのコンテナのインデックスをキャッチする方法はありません。

<li class="liContainer"> 
    <div> 
     <h3>{{nameContainer}}</h3> 
    </div> 
    <div id="idContainer"> 
     <span>ID: {{idContainer}}</span> 
    </div> 
    <div id="stateContainer"> 
     <span class="state">State: {{stateContainer}}</span> 
    </div> 

    <div id="terminalContainer" class="hidden"> 
     <div class="terminal hidden"></div> 
    </div> 

     <button type="button" class="stop {{#if to_hide_stop}}hidden{{/if}}"> </button> 
     <button type="button" class="start {{#if to_hide_start}}hidden{{/if}}"> </button> 
     <button type="button" class="pause {{#if to_hide_pause}}hidden{{/if}}"></button> 
     <button type="button" class="unpause {{#if to_hide_unpause}}hidden{{/if}}"> </button> 
     <button type="button" class="cmdLogs"> terminal </button> 
</li> 

そして、私のJS：

私のHTMLはある

'click .cmdLogs'(event) { 
    Session.set("displayCmdLogs",true); 
    //here I need to do something to get the ID with the event and then I could do... 
    setTimeout(function(){ 
     var term = new Terminal(); 
     console.log("term: " + term); 
     //.. the getElement on the right one 
     term.open(document.getElementsByClassName('terminal')[idFromEvent]); 
     //term.fit(); 
     term.write('Hello from container.js'); 
    },200); 
    } 

Answer 1

は、私はあなたがキャッチしたいidは "idContainer" であると仮定しています。次のように私はあなたのHTMLを変更したい：

<li class="liContainer"> 
    <div> 
     <h3>{{nameContainer}}</h3> 
    </div> 
    <div id="idContainer"> 
     <span>ID: {{idContainer}}</span> 
    </div> 
    <div id="stateContainer"> 
     <span class="state">State: {{stateContainer}}</span> 
    </div> 

    <div id="terminalContainer" class="hidden"> 
     <div class="terminal hidden"></div> 
    </div> 

     <button type="button" class="stop {{#if to_hide_stop}}hidden{{/if}}"> </button> 
     <button type="button" class="start {{#if to_hide_start}}hidden{{/if}}"> </button> 
     <button type="button" class="pause {{#if to_hide_pause}}hidden{{/if}}"></button> 
     <button type="button" class="unpause {{#if to_hide_unpause}}hidden{{/if}}"> </button> 
     <button type="button" class="cmdLogs" id="{{idContainer}}"> terminal </button> 
</li> 

そして、あなたのjs：間違いのために残念

'click .cmdLogs'(event, template) { 
    Session.set("displayCmdLogs",true); 
    var id = event.currentTarget.id; //The id is here 

    setTimeout(function(){ 
     var term = new Terminal(); 
     console.log("term: " + term); 
     //.. the getElement on the right one 
     term.open(document.getElementsByClassName('terminal')[idFromEvent]); 
     //term.fit(); 
     term.write('Hello from container.js'); 
    },200); 
    }