2013-03-18 69 views
0

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

我的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

希望我解释我的问题以及..

感谢

+1

'k'全球?另外,您不需要在单引号内跳过双引号...... – elclanrs 2013-03-18 03:39:51

+1

当您插入新的HTML时,您没有任何操作,它将拾取现有的样式。你不必用'\\'来逃避'''。 – Robin 2013-03-18 03:40:24

+1

http://jsfiddle.net/vigneshvdm/VcAnF/ 你在找这样的东西!?! – 2013-03-18 03:43:33

回答

3

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

实施例:

http://jsfiddle.net/mQKdc/

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

编辑:注意然而,该输入元件是困难的风格,因为每个OS(赢/ 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 +一个不存在,只有输入。 这样的样式应用到的元素(div.star-rating a不存在

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

那么,你是排序后生成HTML是不正确的基础上,在排序前我看到的HTML是否使用某种插件/库产生的星星。如果是这样,我的猜测是有一些功能,你会打电话来产生正确的HTML

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

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

您只需在生成新元素后运行此操作。

+0

我会推我的开发在线,请给我3分钟,然后我会告诉你我的问题是什么 – doniyor 2013-03-18 03:49:00

+1

@ doniyor css正在被覆盖! 您需要指定star css中的所有属性为!important 它将解决问题 – 2013-03-18 04:13:27

+0

@ doniyor这就是为什么您应该使用F12工具检查元素以确定正在应用哪些CSS。告诉你什么影响你的元素的造型。Chrome或Firefox + Firebug是最好的我的想法。你应该阅读“CSS特性”来理解为什么你的CSS被覆盖。 – AaronLS 2013-03-18 04:16:40

1

如果您要添加使用现有Css的新html元素,那么这些元素应该能够默认使用它们。你有什么问题吗?

相关问题