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") は null です

$('div.myclass')など、他のさまざまな名前を試し$('myclass')ましたが、役に立ちませんでした。この効果をクラスで機能させるにはどうすればよいですか? ありがとう！

4

2 に答える 2

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

プロトタイプ (および mootools) の $$ は、$$('div#joe')や $などのあらゆる種類の CSS セレクターを受け入れ$('a[rel=awesome]')、配列を返します。

$ は、$('joe'); のように ID が一致する要素のみを返します。

したがって、この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ドキュメントの script タグに入れます。

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が提供する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（）メソッドを使用する必要をなくします。

于 2009-08-09T10:58:31.353 に答える