0

javascriptを介して動的に新しいhtml要素を追加しています。これらの新しく作成されたhtml要素には、リンクされたstyle.cssファイルにすでに存在するcssクラスがあります。この新しく作成された要素に彼のcssクラスを通知して、このクラスによるスタイル設定が新しく作成されたhtml要素に影響を与えるようにするにはどうすればよいですか。

私のjs：

for(k=1;k<=5;k++){
  if(k==data[i]['price']){
html = html + '<input class=\"star\" type=\"radio\" name=\"test-5\" disabled=\"disabled\" value=\"'+k+'\" checked=\"checked\" />';
  }else{
html = html + '<input class=\"star\" type=\"radio\" name=\"test-6\" disabled=\"disabled\" value=\"'+k+'\"/>';
  }
 }

そのクラスstarは、作成直後にcssファイルに人気があるはずです。make-popularjqueryなどに関数はありますか？

私が私の問題をうまく説明したことを願っています。

ありがとう

4

2 に答える 2

3

ページがすでにCSSファイルを参照している限り、必要なのはclass="star"属性を使用して要素を作成することだけです。html最終的に変数をどのように処理するかはわかりませんが、要素がclass="star"属性とともにページに表示され、スターcssクラスが適切に宣言されていると仮定すると、必要なのはそれだけです。F12開発者ツールを使用してブラウザーの要素を検査し、クラスが適用されていることを確認します。

例：

http://jsfiddle.net/mQKdc/

$(function(){
     $('#addToMe').html('<div class="star">test</div>');
});

編集：ただし、各OS（Win / Linux）やブラウザ（IE、Firefox、Chrome）が独自の入力要素のスタイルを提供できるため、入力要素のスタイルを設定するのは難しいことに注意してください。あなたがそれらにスタイリングするのが難しいと思うかもしれない特定のものがあります。その場合、それは実際にはjavesceiprtの問題ではなく、CSSの問題です。1）CSSが何であるか、2）目標が何であるか、3）現在のCSSが目標を達成していないことを示す何が表示されているか（つまり、問題）を正確に示すCSS関連の質問をする必要があります。

編集2： 並べ替える前に、要素のHTML：

<div role="text" aria-label="" class="star-rating rater-0 star star-rating-applied star-rating-readonly star-rating-on">
   <a title="2">2</a>
</div>

入力もありますが、スタイルはこの要素に適用されています。スタースタイルは<a>要素に適用されます：

div.star-rating a {
background: url(../images/star.gif) no-repeat 0 0px;
}

ソート後、div + aは存在せず、入力のみが存在します。 したがって、スタイルが適用される要素（div.star-rating a存在しません：

<input class="star" type="radio" name="test-1-rating-5" disabled="disabled" value="4">

したがって、並べ替え前に表示されているHTMLに基づいて、並べ替え後に生成するHTMLは正しくありません。星を生成するためにある種のプラグイン/ライブラリを使用していますか？もしそうなら、適切なHTMLを生成するために呼び出す関数があると思います。

解決策： スター評価プラグインをアクティブ化する各要素で.rating（）関数を実行するには、次のようなことを行う必要があるようです。

$('.star').rating();

新しい要素を生成した後、これを実行する必要があります。

于 2013-03-18T03:39:52.680 に答える
1

既存のCssを使用している新しいhtml要素を追加する場合、それらはデフォルトでそれらを使用できるはずです。何か問題がありますか？

于 2013-03-18T03:42:18.707 に答える