Функция Javascript на нескольких элементах на одной странице? - PullRequest
Новая
       0

Функция Javascript на нескольких элементах на одной странице?

0 голосов
/ 25 апреля 2011

Не могли бы вы помочь мне разобраться в этой ситуации? На моей странице я использую Javascript, который динамически генерирует случайный цвет RGB, который применяется к нескольким элементам на странице.

Вот сам 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 () ) несколько раз на моей странице (применяя objName в качестве Id в HTML для разных элементов ). В 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>

Он будет работать нормально только для первого элемента сверху, в данном случае Link # 1, но не для следующих. Есть идеи?

Ответы [ 2 ]

1 голос
/ 25 апреля 2011

идентификатор уникален;Вы не можете иметь несколько элементов с идентификатором random.используйте вместо этого класс.

0 голосов
/ 25 апреля 2011 
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 (' random ',' ',' style.color ',' rgb ('+ r +', '+ g +', '+ b +') '); с этими сценариями выше.

Дублированный идентификатор - это плохая практика. Лучше использовать класс вместо идентификатора. Настоятельно рекомендуется импортировать библиотеку селектора js, такую ​​как jQuery. Тогда вы можете написать только одну строку: 

$('.random').css('color', 'rgb('+r+', '+g+', '+b+')');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...