你如何在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”）为空

我尝试了各种其他名称，例如：$（'div.myclass'）和$（'myclass'）无济于事。如何在课堂上使用此效果？谢谢！

Answer 1

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

原型（和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 });
        });
    });

});

我希望脚本很容易理解。

Answer 2

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

<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（）方法。