Javascript函数在一个页面上的多个元素？

你能帮我弄清楚这种情况吗？在我的页面上，我使用了动态生成随机RGB颜色的Javascript，该颜色被应用于页面上的多个元素。Javascript函数在一个页面上的多个元素？

这里是JavaScript语言：

function MM_findObj(n, d) { //v4.01 
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
d=parent.frames[n.substring(p+10)].document; n=n.substring(0,p);} 
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); 
if(!x && d.getElementById) x=d.getElementById(n); return x; 
} 

function MM_changeProp(objName,x,theProp,theValue) { //v6.0 
var obj = MM_findObj(objName); 
if (obj && (theProp.indexOf("style.")==-1 || obj.style)){ 
if (theValue == true || theValue == false) 
eval("obj."+theProp+"="+theValue); 
else eval("obj."+theProp+"='"+theValue+"'"); 
} 
} 

// get random RGB values so we can change background and link colors 
var r = Math.floor(Math.random()*241); 
var g = Math.floor(Math.random()*241); 
var b = Math.floor(Math.random()*241); 

// variables to hold the lighter shade RGB values 
var rp1, gp1, bp1, rp2, gp2, bp2, rp3, gp3, bp3; 

//we'll use these values to calculate lighter shades 
var p1 = .1; 
var p2 = .15; 
var p3 = .2; 

getLighterRGBShades(); 

// get random intervals used to calculate the changing RGB values 
var ri = Math.floor(Math.random()*4); 
var gi = Math.floor(Math.random()*4); 
var bi = Math.floor(Math.random()*4); 

// This changes the color 
function randomcolor() { 
if (r>239||r<1) ri=ri*-1; 
if (g>239||g<1) gi=gi*-1; 
if (b>239||b<1) bi=bi*-1; 
r+=ri; 
g+=gi; 
b+=bi; 
MM_changeProp('random','','style.color','rgb('+r+', '+g+', '+b+')'); 

getLighterRGBShades(); 

setTimeout('randomcolor()',100); 
} 

function getLighterRGBShades() { 
rp1=parseInt((r*p1)+(255-(255*p1))); 
gp1=parseInt((g*p1)+(255-(255*p1))); 
bp1=parseInt((b*p1)+(255-(255*p1))); 
rp2=parseInt((r*p2)+(255-(255*p2))); 
gp2=parseInt((g*p2)+(255-(255*p2))); 
bp2=parseInt((b*p2)+(255-(255*p2))); 
rp3=parseInt((r*p3)+(255-(255*p3))); 
gp3=parseInt((g*p3)+(255-(255*p3))); 
bp3=parseInt((b*p3)+(255-(255*p3))); 
}

一切工作正常，但问题是，我不能在我的网页上使用一个函数（在）这种情况下，所谓的randomcolor（）多次（将HTML中的objName作为Id应用于不同的元素）。在HTML，这将如下所示：

<html> 
<head> 
</head> 
<body onLoad="randomcolor()> 
... 
<a href="#1" id="random">Link#1</a> 
... 
<a href="#2" id="random">Link#2</a> 
... 
<a href="#3" id="random">Link#3</a> 
... 
</body> 
</html>

它会正常工作仅针对从顶部的第一个元素，在这种情况下链接＃1，但不是以下物质。任何想法？

来源

2011-04-24 user722941

'eval'和'document.layers'？你是认真的吗？我们是否突然回到1995年？ – 2011-04-24 21:11:00

更改id为一个类，那会做 – Ibu 2011-04-24 21:12:16

id是唯一的;你不能有随机编号的几个元素。改用类。

来源

2011-04-24 21:10:09 herostwist

谢谢你的回答！这可能应该是其中的原因！但是，我只是试图做到这一点，不幸的是，当使用类而不是id脚本将不会工作。也许解决方案是在Javascript本身的某个地方？ – user722941 2011-04-24 21:43:47

是的，您需要更改脚本，因为它仍然使用getElementById。我认为你看看jQuery，你可以用$（'。random'）' – herostwist 2011-04-24 22:38:44

替代整个蹩脚的macromedia MM_findObj再次感谢你！它现在是固定的） – user722941 2011-04-25 08:09:13

var arrays = document.body.getElementsByTagName('A'); 
for(var i = 0; i < arrays.length; i ++) { 
    var elem = arrays[i]; 
    if(elem.id == 'random') { 
     elem.style.color = 'rgb('+r+', '+g+', '+b+')'; 
    } 
}

请替换 'MM_changeProp（' 随机 ' ''， 'style.color'， 'RGB（' + R +'， '+ G +'， '+ B +'）'）; '与上述脚本。

重复的ID不好实际。更好地使用类而不是id。强烈推荐导入jQuery选择器库，例如jQuery。那么你可以只写一行：

$('.random').css('color', 'rgb('+r+', '+g+', '+b+')');

来源

2011-04-25 03:02:54

非常感谢你veru！现在已经很完美了 – user722941 2011-04-25 08:07:38

Javascript函数在一个页面上的多个元素？

回答

相关问题