私は要素を持っています。 リストビューにはアイテムのリストがあります。 最初は、円はレンダリングされません。 CSS display
プロパティをnone
に設定しましたが、代わりにselect an item
というメッセージが表示されます。アイデアは、ユーザーがリストから項目を選択したときに、選択した項目に関連付けられたbackground-color
プロパティを変更している円を表示したい場合です。DOMにない要素のCSSを変更する
私のアプローチは問題がある。この
itemSelected(item) {
const itemtColor = item.color;
$('#selected-item-color').css('background-color', itemColor);
}
のようなものです:
私は$('#selected-item-color')
をしようとすると、要素がDOMに存在しないので、それは空のリストを返し、変更されますプロパティは何もしません。しかし、次回以降の選択では正常に動作します。
したがって、実際に要素がjQueryまたはJavaScriptのいずれかでDOMにレンダリングされる前に、これを行うためのきれいな方法がありますか。または、要素がレンダリングされた後にこれを行う方法を探してみる必要があります。これは、問題がある場合にはわかりません。
ご協力いただきありがとうございます。
編集:
私はhandlebars
あなたの問題を解決するために機能
<div class="item-list-content">
{{#each itemList as |item|}}
<div class="list-item" {{action "itemSelected" item}}>{{item.name}}</div>
{{/each}}
</div>
上に動的なコンテンツ
<div class="item-details">
{{#if selecteditem}}
<div id="selected-item-color"></div>
{{else}}
<div class="item-details-message">Please select an item</div>
{{/if}}
</div>
あなたは要素がDOMツリーにないことを確認していますか? DOMツリーとレイアウトツリーは別々の2つのものです。 display:noneは後者から要素を削除するだけです。 – BoltClock
ええ、私は木の構造をチェックしました。それが意図されていた。私は要素の代わりに最初に表示されるメッセージを持っています。 –
要素が表示されるときにcssを変更します(つまり、選択の変更を意味します) –