Adding a group of elements with incremented IDs_MooTools 1.3 Cookbook-QQ阅读仙侠女生网

书名：MooTools 1.3 Cookbook
作者名：Jay Larry G. Johnston
本章字数：446字
更新时间：2021-04-02 19:07:09

Adding a group of elements with incremented IDs

When we need a new group of elements but each must be unique on the page, this trick works well.

Getting ready

Classes define groups of elements. When making a group of radio buttons, we give them all the same NAME attribute. When making a group of elements, we give them all the same class. But what happens when we need to be able to identify members of that group individually?

How to do it...

It is necessary for each member to have its own unique ID attribute. We could generate that using String.uniqueID(); yet, sometimes an incrementing ID scheme can be helpful and easier to read.

<script type="text/javascript" src="mootools-1.3.0.js"></script>
</head>
<body>
<form action="" method="get">
<input id="create" type="button"
value="Increment Radio Buttons"/>
<input id="extract" type="button"
value="Get ID of Selected Radio"/>
<br/>
<div class="animals">
Cat<br/>
My Favorite <input class="rb" type="radio" name="favorite"
value="Cat"/>
<div class="sam-i-am"></div>
</div>
<div class="animals">
Dog<br/>
My Favorite <input class="rb" type="radio" name="favorite"
value="Dog"/>
<div class="sam-i-am"></div>
</div>
<div class="animals">
Pig<br/>
My Favorite <input class="rb" type="radio" name="favorite"
value="Pig"/>
<div class="sam-i-am"></div>
</div>
</form>
<style type="text/css">
.animals {
width:150px; border:1px solid #BEBEBE; line-height:50px;
text-align:center; float:left; margin-right:10px;
}
</style>
<script type="text/javascript">
$('extract').setStyle('visibility','hidden');
$('create').addEvent('click', function() {
// this is only meant to be fired once
this.setStyle('visibility','hidden');
$('extract').setStyle('visibility','visible');
// A
// create unique ids that increment
$$('.rb').forEach(function(el,index) {
el.set('id','favorite_'+index);
});
});
$('extract').addEvent('click', function() {
var myid = 0;
// have sam tell who he is (if selected)
$$('.rb').forEach(function(el) {
if(el.get('checked')!==false) {
// the incrementer here will help us know
// which span to populate
myid = el.get('id').replace('favorite_','');
}
});
// B
// take advantage of our incrementing pattern
$$('.sam-i-am').forEach(function(el,index) {
el.set('text','');
if (index===myid.toInt()) el.set('text',
'My ID: favorite_'+myid);
});
});
</script>

How it works...

During the forEach() iterator, we use the index argument passed in by the MooTools framework to build a unique ID that is user friendly: favorite_[index]. That is visible in code block A. Then in code block B, we take advantage of that simplicity of naming by using a secondary, parallel incrementing sibling, the sam-i-am class DIV group.

Though this recipe took a lot of leg work to set up, the idea is clear. Incrementing ID values can allow us to more easily get control over our DOM and find the elements that we need quickly and with less coding.

There's more...

Note

It is often said but frequently ignored; ID attributes MUST be unique in the DOM!

The text injection of the My ID: favorite_[myid] phrase, to show the auto-increment ID selected, is necessary to display this seemingly intangible addition of the ID attributes. There is a way to see the DOM change midstream: use a live-DOM inspector to watch how our radio elements' ID attributes are added in a unique, incrementing fashion, then accessed via a patterned reconstruction via a sibling element. Many use the Firefox plugin called Firebug to inspect their DOM in real time.