2

这是我的代码片段：

<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')，但无济于事。如何在课堂上获得这种效果？谢谢！

4

2 回答 2

3 
$$('.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 });
        });
    });

});

我希望脚本很容易理解。

于 2009-08-09T03:36:39.140 回答
1

要归功于 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() 方法。

于 2009-08-09T10:58:31.353 回答