2017-05-08 14 views
0

私は要素を持っています。 リストビューにはアイテムのリストがあります。 最初は、円はレンダリングされません。 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> 
+1

あなたは要素がDOMツリーにないことを確認していますか? DOMツリーとレイアウトツリーは別々の2つのものです。 display:noneは後者から要素を削除するだけです。 – BoltClock

+0

ええ、私は木の構造をチェックしました。それが意図されていた。私は要素の代わりに最初に表示されるメッセージを持っています。 –

+0

要素が表示されるときにcssを変更します(つまり、選択の変更を意味します) –

答えて

0

を呼び出すコードで記述されたHTMLコードを持っていますあなたはジュースできますngIfの代わりにngShowを使用します。その方法もありますが、問題を解決するためにngShowが問題を解決します。

+0

'ngIf/ngShow'は、あなたがangular.jsと話しているように聞こえますが、私はそれを使っていません。 –

0

私はいくつかのことを試しましたが、これを解決するために何も得られませんでした。

私は次善策をとった。 タイムアウト機能の中でプロジェクトの色を変更するようにコードを設定する。 1msのタイムアウトは私のために働いたが、私はそれをうまくテストしていないし、安全な側にするために、10msの間隔は問題なく動作するはずである。

setTimeout()

関連する問題