Question

用jQuery编写的语句，如何用原型

编写

$("#productNav li a").click(function(){
$("#productNav li a").removeClass("selectedProd");
$(this).addClass("selectedProd");
$("#productListCntnr > ul").slideUp(300);
$("#productListCntnr > ul."+this.id).slideDown(300);
});

Answer 1

我不确定处理你正在做的滑动内容的最佳方法，但这应该是点击和添加/删除selectedProd CSS类的基本机制。

Event.observe(window, 'load', function() {
    //When the window loads, iterate over all of the appropriate <a> tags
    $$('#productNav li a').each( function(elem) {

        //Handle the click event on each a tag
        Event.observe(elem, 'click', function(event) {
            //Remove the selectedProd class from all <a> tags
            $$('#productNav li a').each( function(elem) {
                elem.removeClassName('selectedProd');
            });

            //Add the selectedProd class to the <a> tag that was clicked
            this.addClassName('selectedProd');

            //Stop the browser from following the link specified in the href=""
            Event.stop(event);
        });
    });
});

Answer 2

虽然我在想这个Mark已经回答了，但我想出了以下内容：

$$("#productNav li a").observe('click', function(event){
  $$("#productNav li a").invoke('removeClassName', 'selectedProd'));
  $$("#productListCntnr > ul").invoke('SlideUp',{ duration: 3.0 });
  Event.element(event).invoke('addClassName', 'selectedProd'));
  $$("#productListCntnr > ul#"+Event.element(event).id).invoke('SlideDown',{ duration: 3.0 });
});

SlideUp和SlideDown方法来自Scriptaculous，不确定它们是否与jQuery效果直接兼容。我还假设你在最后一行中意味着ul#，因为你是按ID选择的，在这种情况下，既然ID是唯一的，你可以这样做：

Effect.SlideDown(Event.element(event).id, { duration: 3.0 });

- 修改

根据Mark的评论，我在实际的浏览器中使用了上述代码，这是一个工作版本：

Event.observe(window, 'load', function() {
    $$("#productNav li a").invoke('observe', 'click', function(event){
        $$("#productNav li a.selectedProd").invoke('removeClassName', 'selectedProd');
        Event.element(event).addClassName('selectedProd');
        Effect.Pulsate(Event.element(event).id, { pulses: 5, duration: 3.0 });
    });
});

我不确定SlideUp应该做什么，所以我把它拿出来，我认为它不是在与productNav相同的列表元素上运行？ SlideDown似乎也没有做任何事情，可能是因为SlideUp已经不见了，所以我把它换成Pulsate只是为了确认它是否正常工作。我不得不使用上面提到的替代语法，因为原始文件根本不起作用（在元素上没有像invoke方法那样的错误）。

我猜测原始代码是为了将SlideUp和SlideDown的内容区域与菜单项分开？在这种情况下，此代码必须更改，但您的原始html也将无效，因为它意味着菜单中的列表项和内容区域中的列表项具有相同的ID。作为参考，这是我的HTML的样子：

<ul id="productNav">
    <li><a id="p1" href="#">Product 1</a></li>
    <li><a id="p2" href="#">Product 2</a></li>
    <li><a id="p3" href="#">Product 3</a></li>
    <li><a id="p4" href="#">Product 4</a></li>
    <li><a id="p5" href="#">Product 5</a></li>
    <li><a id="p6" href="#">Product 6</a></li>
</ul>

用jQuery编写的简单语句，我将如何用PrototypeJS编写它

2 个答案: