1

段落のリスト ( <p>) が表示されます。ユーザーが段落 A をクリックするとすぐに、段落 A のクラスが「アクティブ化」に変わります。ここで、ユーザーが段落 B を選択すると、A と B の間のすべての段落のクラスが「アクティブ化」に変更されます。

B をもう一度クリックすると、A だけが「アクティブ」なクラスに残ります。

A をクリックすると、A と B の間のすべての段落 (A と B を含む) のクラス「アクティブ」が削除されます。

A と B の間の段落を「非アクティブ化」することはできません。

Prototype/Scriptaculous でこれを実現する方法についてヒントを教えてもらえますか? このアプリケーションは Rails で実装されているため、RJS でのヒントがあればなおさらです。

4

4 に答える 4

1

段落が 'info' というラッパー div にあると仮定します (テストはしていませんが、次のようになります)。

$('info').select('P').each(function(element) {
    Event.observe(element,'click',function(event){
        flipIt(event)
    })
})

function flipIt(evt) {  
    var element = evt.element();
    if($(element).hasClassName('active')) {
        $(element).removeClassName('active')
    }
    else {
        $(element).addClassName('active')
    }
}
于 2009-03-10T17:15:49.433 に答える
0

OK、その間に、同僚の助けを借りて、私はこの問題に対する独自の答えを思いつきました：

<script type="text/javascript">
    // holds paragraph A (first selected paragraph)
    var a_selected = null;
    // holds paragraph B (second selected paragraph)
    var b_selected = null;
    // holds all 'active' paragraphs
    var selected_paras = [];

    function class_flipper_init() {
        // reset paragraphs A and B
        a_selected = null;
        b_selected = null;
        var paragraphs = $$("#foobar p");
        paragraphs.each(function(paragraph, index) {
            // if user clicks on a paragraph
            paragraph.observe("click", function(event) {
                // if A and B are 'active': reset everything.
                if(b_selected != null) {
                    selected_paras.each(function(i) {
                        toggleStyle(i);
                    })
                    a_selected = null
                    b_selected = null
                    return
                }
                // if A is 'active'
                if(a_selected != null) {
                    // if A is 'active' and selected B is below A:
                    // select all paragraphs between A and B
                    if(a_selected < index) {
                        b_selected = index;
                        for (var i = a_selected + 1; i <= index; i++ ) {
                            toggleStyle(paragraphs[i])
                        }
                    }
                    // if A is 'active' and selected B is above A: 
                    // select all paragraphs between A and B
                    else if(a_selected > index) {
                        b_selected = index;
                        for (var i = a_selected - 1; i >= index; i-- ) {
                            toggleStyle(paragraphs[i])
                        }
                    }
                    // if A == B
                    else {
                        toggleStyle(paragraph)
                        a_selected = null
                    }
                }
                // if A is selected
                else {
                    a_selected = index;
                    toggleStyle(paragraph)
                }
            });
        });
    }

    function toggleStyle(paragraph) {
        // remove active class
        if (paragraph.hasClassName("active")) {
            paragraph.removeClassName("active");
            selected_paras = selected_paras.without(paragraph)
        } 
        // set active class
        else {
            paragraph.addClassName("active");
            selected_paras.push(paragraph)
        }
    }
</script>

class_flipper_init()ページ（または私の場合は特定の部分）がロードされるたびに呼び出されます。

「純粋な」RJSまたはよりエレガントなもので書かれた解決策を提出することを躊躇しないでください。:-)

于 2009-03-11T16:00:16.440 に答える