如何获取我们点击了哪个元素的索引

Question

我有一个容器列表，我想添加一个按钮，在我们单击终端徽标的容器上显示终端。

但我不知道如何在列表中捕获容器的索引。

我的 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"> terminal </button>
</li>

还有我的 JS：

'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);
  }