0

我正在通过 javascript 动态添加新的 html 元素，而那些新创建的 html 元素有一个 css 类，它已经存在于链接的 style.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 文件中流行。jquery有什么make-popular功能吗？

希望我能很好地解释我的问题..

谢谢

4

2 回答 2

3

只要页面已经引用了 CSS 文件，那么您所要做的就是创建具有 class="star" 属性的元素。我看不到你最终对html变量做了什么，但假设你的元素出现在带有class="star"属性的页面上，并且你有一个正确声明的星形 css 类，那么这就是所需要的。使用 F12 开发人员工具检查浏览器中的元素以验证正在应用的类。

例子：

http://jsfiddle.net/mQKdc/

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

编辑：但是请注意，输入元素很难设置样式，因为每个操作系统（Win/Linux）和/或浏览器（IE、Firefox、Chrome）都可以提供自己的输入元素样式。您可能会发现某些东西很难在它们上设计样式。在这种情况下，它并不是真正的 javesceiprt 问题，而是 CSS 问题。您需要问一个与 CSS 相关的问题，具体说明 1）您的 CSS 是什么，2）您的目标是什么，3）您所看到的表明您当前的 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 Plugin 的每个元素上：

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

您只需要在生成新元素后运行它。

于 2013-03-18T03:39:52.680 回答
1

如果您要添加使用现有 Css 的新 html 元素，那么默认情况下应该能够使用它们。你有什么问题吗？

于 2013-03-18T03:42:18.707 回答