javascript - 如何将新创建的 html 元素绑定(bind)到它的 css

Question

我正在通过 javascript 动态添加新的 html 元素，这些新创建的 html 元素有一个 css 类，它已经存在于链接的 style.css 文件中。我如何让这个新创建的元素知道他的 css 类，以便此类的样式可以影响新创建的 html 元素。

我的代码:

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 函数？

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

谢谢

Answer 1

只要页面已经引用了 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不存在，只有input。 所以应用该样式的元素(div.star-rating a不存在:

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

因此，根据我在排序前看到的 HTML，排序后生成的 HTML 是不正确的。您是否使用某种插件/库来生成星星？如果是这样，我猜你会调用一些函数来生成正确的 HTML。

解决方案: 看起来你应该做这样的事情来在你想要激活星级评分插件的每个元素上运行 .rating() 函数:

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

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