电子信息与电子科技的区别

書名： 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.

官术网_书友最值得收藏!

Adding a group of elements with incremented IDs

Getting ready

How to do it...

How it works...

There's more...

Note

See also

官术网_书友最值得收藏!

MooTools 1.3 Cookbook

Adding a group of elements with incremented IDs

Getting ready

How to do it...

How it works...

There's more...

Note

See also