如何在ScriptaculousJavaScript中选择CSS类？

以下是我的代码片段：

<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为空

我尝试过各种其他名称，例如：$'div.myclass'和$'myclass'，但都没有用。我如何在课堂上获得这种效果？谢谢

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

prototype和mootools中的$$接受任何类型的css选择器，如$$'divjoe'或$$'a[rel=awesome]”，并返回一个数组

$将只返回一个具有匹配id的元素，如$'joe'

鉴于此html：

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

然后将其放在脚本标记中文档的头部

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 });
        });
    });

});

---

我希望脚本易于理解。

要归功于rpflo，使用突兀的javascript并不理想。但是，如果您正在寻找要插入的最简单的代码，则始终可以使用Prototype提供的invoke方法

<a href="#" onclick="$$('.myclass').invoke('fade',{ duration: 0.1, from: 1, to: 0 });
$$('.myclass').invoke('appear',{ delay: 0.35 });return false;">Div 1</a>

---

invoke方法在一组DOM元素上执行相同的函数，并避免使用.each方法。

Now firbug说：$$.myclass.fade不是一个函数请参见编辑到第一行，它现在指向从$$返回的元素的第一个元素，在您的情况下，它应该只有一个。非常感谢您迄今为止的帮助。然而，我仍然无法让类选择器工作。获取数据不是函数错误。我想淡出更多的div而不仅仅是那一个。这是我正在处理的页面：很高兴知道。Mootools是我的javascript主页，如果你有$$'.blah'.fade，它会自动调用。使用每个循环可能仍然有意义，因此当您必须在每个循环中执行多个操作时，而不是$$'.class'.invoke'whatever'.invoke'something'.invoke'blah'；等一下。。。您的代码将全部淡出，然后再次淡入。单击Div 1时，应仅显示divdemo。您希望将其更改为仅$'demo'。显示[args]；对于第一个链接，接下来的两个链接是demo2和demo3。

<a href="#" onclick="$$('.myclass').invoke('fade',{ duration: 0.1, from: 1, to: 0 });
$$('.myclass').invoke('appear',{ delay: 0.35 });return false;">Div 1</a>