一个页面上的多个元素的JavaScript函数？ [英] Javascript function on multiple elements at one page?

问题描述

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

这里是Javascript本身：

 函数MM_findObj（n，d）{//v4.01 
 var p，i，x;如果（！d）d =文档; if（（p = n.indexOf（？））> 0&& amp; parent.frames.length）{
 d = parent.frames [n.substring（p + 10）]。 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]; （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; 
 
 
函数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 +'）; 
 
 
 
 //得到随机的RGB值，所以我们可以改变背景和链接颜色
 var r = Math.floor（Math.random（）* 241 ）; 
 var g = Math.floor（Math.random（）* 241）; 
 var b = Math.floor（Math.random（）* 241）; 
 
 //变量保存较浅的RGB值
 var rp1，gp1，bp1，rp2，gp2，bp2，rp3，gp3，bp3; 
 
 //我们将使用这些值计算较浅的阴影
 var p1 = .1; 
 var p2 = .15; 
 var p3 = .2; 
 
 getLighterRGBShades（）; 
 
 //获得用于计算变化RGB值的随机时间间隔
 var ri = Math.floor（Math.random（）* 4）; 
 var gi = Math.floor（Math.random（）* 4）; 
 var bi = Math.floor（Math.random（）* 4）; 
 
 //这改变颜色
函数randomcolor（）{
 if（r> 239 || r< 1）ri = ri * -1; （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）; 
 
 
函数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（））多次在我的页面上应用（将objName作为HTML中的Id应用于不同的元素）。
在HTML中，如下所示：

 < html> 
< head> 
< / head> 
< body onLoad =randomcolor（）> 
 ... 
< a href =＃1id =random>链接＃1< / a> 
 ... 
< a href =＃2id =random>链接＃2< / a> 
 ... 
< a href = ＃3id =random> Link＃3< / a> 
 ... 
< / body> 
< / html> 
  

它仅适用于顶部的第一个元素，在这种情况下为链接＃1，但不适用于以下元素。 b $ b有什么想法？

解决方案

id是唯一的;你不能使用id随机的几个元素。 / p>

Could you please help me to figure out this situation? On my page I'm using Javascript which dynamically generates random RGB color, which is being applied to multiple elements on the page.

Here is Javascript itself:

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)));
}

Everything works fine, but the problem is that I can't use one function (in this case called randomcolor()) for several times on my page (applying objName as Id in HTML for different elements). In HTML this will look as follows:

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

It will work fine only for for the first element from the top, in this case Link#1, but not for the following ones. Any ideas?

解决方案

id is unique; you cant have several elements with the id random. use class instead.

这篇关于一个页面上的多个元素的JavaScript函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！