Good all the time of day, gentlemen.

Yesterday, armed with this - got the following:

// вывожу в php ссылки, которые отдают данные ajax скрипту <a style=\"{cursor:pointer;display:inline;}\" id=\"si_aa".$m4["id"]."\" onclick="getElem(this);"> <div style=\"display:inline; padding:1px; border-radius:3px;\"> Слово </div> </a>

Below on the same page I write the following

 <script> function getElem(elem) { var elems = elem.getElementsByTagName('div'); var first_el = elems[0]; if(first_el.getAttribute('active') == undefined || first_el.getAttribute('active') == '0') { first_el.style.backgroundColor = '#99DDFF'; first_el.setAttribute('active', '1'); } else { first_el.style.backgroundColor = 'FFFFFF'; first_el.setAttribute('active', '0'); } } </script>

It turns out such an analogue checkbox, and blue highlighted links are clicked, which if desired, and more can be squeezed.

Is it possible to do this so that with a certain number of clicked links, it will be impossible to click on more links, and all non-clicked links will replace id with 0? (Although you can not replace the id.)

Let's say a person clicked on some of these links, as soon as 3 is marked, all other links cannot be clicked (ideally, they will have 0 id) until you press one back. Tell me, is it possible?

  • such question: id-shnik links are known? - lampa
  • Add a counter variable. Increase the value each time the link is highlighted and decrease when the link is "unwound". Also, before clicking the link, check the value of the variable. If less than 3 - feel free to click the link otherwise just skip the steps. Well, to achieve the counter of the desired value (in example 3) just go through all the links and set the desired id - iKuzko
  • wow, welcome @lampa. id - unknown. in theory, it is possible without them. It is ideal with them. - sergey
  • @mixalef - the most correct option suggested @iKuzko - lampa
  • Oh, not a JS connoisseur. the counter is not a problem, say in this form: id = \ "si_aa". $ m4 ["id"]. " aa " .count. "\" here's the rest to know how. id themselves change is not important, more interested in the selection of the background. - sergey

2 answers 2

Of course, it may be a bit of a codename, but:

 <script> var count = 0; var className = 'element'; function getElem(elem) { var elems = elem.getElementsByTagName('div'); var first_el = elems[0]; if(first_el.getAttribute('active') == undefined || first_el.getAttribute('active') == '0') { if(count >= 3) { return false; } first_el.style.backgroundColor = '#99DDFF'; first_el.setAttribute('active', '1'); // count++; } else { first_el.style.backgroundColor = 'FFFFFF'; first_el.setAttribute('active', '0'); // count--; } if(count >= 3) { var elements = document.getElementsByTagName('a'); for(var i=0; i < elements.length; i++) { if((new RegExp(className).test(elements[i].className))) { elems = elements[i].getElementsByTagName('div'); first_el = elems[0]; if(first_el.getAttribute('active') == undefined || first_el.getAttribute('active') == '0') { first_el.className += 'disabled'; } } } } return false; } </script> <a style="{cursor:pointer;display:inline;}" id="si_aa" onclick="getElem(this);" class='element'> <div style="display:inline; padding:1px; border-radius:3px;"> Слово </div> </a> <a style="{cursor:pointer;display:inline;}" id="si_aa" onclick="getElem(this);" class='element'> <div style="display:inline; padding:1px; border-radius:3px;"> Слово </div> </a> <a style="{cursor:pointer;display:inline;}" id="si_aa" onclick="getElem(this);" class='element'> <div style="display:inline; padding:1px; border-radius:3px;"> Слово </div> </a> <a style="{cursor:pointer;display:inline;}" id="si_aa" onclick="getElem(this);" class='element'> <div style="display:inline; padding:1px; border-radius:3px;"> Слово </div> </a> <a style="{cursor:pointer;display:inline;}" id="si_aa" onclick="getElem(this);" class='element'> <div style="display:inline; padding:1px; border-radius:3px;"> Слово </div> </a>
  • Thank you so much, asking for more to learn. Now I will disassemble everything to the ground. I donate some experience points because really asked a complicated one. - sergey
  • @mixalef only here the class disabled is not removed. Figure out how to remove it. It will be a good experience. - lampa
  • ok, it will be necessary to think out - sergey

Add a counter variable. Increase the value each time the link is highlighted and decrease when the link is "unwound". Also, before clicking the link, check the value of the variable.

If less than 3 - feel free to click the link otherwise just skip the steps. Well, to achieve the counter of the desired value (in example 3) just go through all the links and set the desired id

 <script type="text/javascript"> var count = 0; function getElem(elem) { var first_el = elem.getElementsByTagName('div')[0]; if(first_el.getAttribute('active') == undefined || first_el.getAttribute('active') == '0') { if (count > 2) return false; first_el.style.backgroundColor = '#99DDFF'; first_el.setAttribute('active', '1'); count++; } else { first_el.style.backgroundColor = 'FFFFFF'; first_el.setAttribute('active', '0'); count--; } } </script>