如何在 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() 方法。