Sorry, I'm not a real programmer but I'm trying to wrap my head around how mootools works and what I'm doing wrong.
window.addEvent('domready', function() {
$$('.wl').addEvent('click', function() {
this.getNext().getNext().getChildren('.wd').slide();
});
});
HTML:
<li>
<a class="wl" href="javascript:;">main</a>
<span class="dictinfo"></span>
<div class="wd">
</div>
</li>
HTML2:
<li>
<a class="wl" href="javascript:;">main</a>
<audio id="audio1" src="audio1.mp3"></audio>
<span class="dictinfo"></span>
<button>Click</button>
<div class="wd"></div>
</li>
The first example works well sliding in and out the contents of "wd" when "wl" is clicked. However in the second example it doesn't work because the order of tags is different. I could work around this by adding more getNext()s but I'd like this to be dynamic, i.e. I want the script to get next elements until it encounters the one with "wd" class and work on it. Right now it's too rigid and it must be flexible to let me freely add elements in-between "wd" and "wl".
to put comment into an answer.
making it less rigid / dependent on a particular markup can be done in two ways:
$$('.wl').addEvent('click', function(){
this.getParent('li').getElement('.wd').slide();
});
the above has the advantage of not caring about the nested structure of elements within the li, they don't need to be siblings to the link.
if they will always be siblings, you can also use http://mootools.net/core/docs/1.5.1/Element/Element#Element:getNext
$$('.wl').addEvent('click', function(){
this.getNext('.wd').slide();
});