Javascript 使用jQuery编写的简单语句，如何使用PrototypeJS编写

用jQuery编写的语句，我该如何用prototype编写

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

---

我不确定处理滑动内容的最佳方法，但这应该可以完成单击和添加/删除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);
        });
    });
});

事件。观察（窗口“加载”，函数（）{
//加载窗口时，迭代所有适当的标记
$$（'#productNav li a'）。每个（函数（元素）{
//处理每个a标记上的单击事件
事件。观察（元素，'点击'，功能（事件）{
//从所有标记中删除selectedProd类
$$（'#productNav li a'）。每个（函数（元素）{
元素removeClassName（'selectedProd'）；
});
//将selectedProd类添加到单击的标记中
这个.addClassName（'selectedProd'）；
//停止浏览器跟随href=“”中指定的链接
事件。停止（事件）；
});
});
});

当我思考这个问题时，马克已经回答了，但我想到了以下几点：

$$("#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 });
});

和方法来自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方法）

我猜原来的代码是用来滑动和向下滑动一个独立于菜单项的内容区域？在这种情况下，此代码必须更改，但原始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>

您可以通过跟踪之前选择了哪个“a”标记，而不是每次单击时循环所有标记，从而将此过程缩短一点。但我将把它留给您作为练习：）我认为您不能将$$（）与.observe（）或.invoke（）一起使用，因为$$（）只返回一个扩展元素数组。啊，是的。Invoke还可以-它在数组的每个元素上调用函数（请参见prototypejs.org/api/enumerable/Invoke-它在可枚举对象上），但是是的，我希望观察本身需要用类似Invoke（）或each（）的东西来包装。非常感谢，我非常感谢您的回答