灰燼onClick事件未完成操作

Question

我正在開發一個Ember應用程序，但在處理DOM和組件方面遇到了麻煩。 我有一個company companies-expander組件，它將顯示database每個公司，並將展開以顯示該公司可用的工作：

//companies.hbs
<h1>Companies</h1>

{{#each model as |company| }}
  {{company-expander name=company.name url=company.url address=company.address positions=company.positions}}
{{/each}}

{{outlet}}

company-expander組件模板文件如下所示：

<div class="expander">
  <a href="javascript:void(0)" id="js-expander-trigger" class="expander-trigger expander-hidden">{{name}}</a>
  <div id="js-expander-content" class="expander-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  </div>
</div>

company-expander.js文件如下所示：

import Ember from 'ember';

export default Ember.Component.extend({
    _setup: Ember.on('didInsertElement', function() {

        console.log("doc ready");
        var expanderTrigger = document.getElementById("js-expander-trigger");
        var expanderContent = document.getElementById("js-expander-content");

        $('#js-expander-trigger').click(function(){
          console.log("click");
          $(this).toggleClass("expander-hidden");
        });

    })
});

組件成功加載並提取公司名稱。 問題在於，單擊第一個項目時，僅單擊會注冊，並且會注冊單擊次數，因為會返回許多公司記錄。 div的類也不會切換。

Answer 1

除非ID在任何特定頁面中都不是唯一的，否則不應使用“ getElementById”。 在您的情況下，由於組件位於每個循環中，因此重復相同的元素ID。

將ID替換為class將在這里起作用。 這是工作示例。 https://ember-twiddle.com/83604248a4bba2c5092d