javascript - 如何在 Scriptaculous JavaScript 中选择 CSS 类？

Question

这是我的代码片段:

<div class="myclass" id="demo" style="display:none;">Hello.</div>

<a href="#" onclick="$('.myclass').fade({ duration: 0.3, from: 1, to: 0 }); $('demo').appear({ delay: 0.35 }); return false;">Click ME!</a><br />

我的 Firebug 开发插件说:

$(".myclass") is null

我尝试了各种其他名称，例如:$('div.myclass')和$('myclass')，但没有成功。如何让这种效果在类里面发挥作用？谢谢!

Answer 1

$$('.myclass')[0].fade()

原型(prototype)(和 mootools)中的

$$ 接受任何类型的 css 选择器，例如 $$('div#joe') 或 $$('a[rel=awesome]') 并返回一个数组。

$ 将仅返回具有匹配 id 的元素，如 $('joe');

因此给出这个 html:

<div id="joe" class="awesome"></div>
<div id="sally" class="awesome"></div>

1. $$('.awesome') 将返回包含两个 DIV 的数组
2. $('joe') 和 $$('#joe') 实际上是相同的(尽管后者是一个数组)。

---

编辑

首先删除 onclick 事件并向 rel 属性添加一些信息，如下所示:

<a rel="demo" href="#">Div 1</a><br />
<a rel="demo2" href="#">Div 2</a><br />
<a rel="demo3" href="#">Div 3</a>

然后将其放入文档的 head 脚本标记中。

document.observe("dom:loaded", function() {
    // this makes sure the document is loaded and ready to be manipulated       

    // store your links and demo DIVs in arrays
    var links = $$('div.rightcol a');
    var demos = $$('.myclass');

    // enumerate over the links
    links.each(function(link){
        // observe the click event of the current link in the loop
        link.observe('click',function(event){
            event.stop();
            // loop the demo DIVs and fade each one
            demos.each(function(demo){
                demo.fade({ duration: 0.3, from: 1, to: 0 });
            });
            // figure out which demo to fade in from the links rel attribute
            var target = link.readAttribute('rel');
            // get the demo target and fade it in
            $(target).appear({ delay: 0.35 });
        });
    });

});

我希望脚本很容易理解。