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

#javascript #html #function

#javascript #HTML #функция

Вопрос:

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

Вот сам Javascript:

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

function MM_changeProp(objName,x,theProp,theValue) { //v6.0
var obj = MM_findObj(objName);
if (obj amp;amp; (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 в качестве идентификатора в 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>

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

Ответ №1:

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

1. Спасибо за ответ! Это, вероятно, должно быть одной из причин! Но я только что попытался это сделать, и, к сожалению, при использовании class вместо id скрипт вообще не будет работать. Может быть, решение где-то в самом Javascript?

2. да, вам нужно изменить скрипт, поскольку он все еще использует getElementById. Я предлагаю вам заглянуть в jQuery, где вы могли бы заменить весь дерьмовый macromedia MM_findObj простым $('.random')

Ответ №2:

 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 ‘)’);
‘ с помощью приведенных выше сценариев.

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

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