用 jQuery 写的语句，我应该怎么用原型写这个
$("#productNav li a").click(function(){
$("#productNav li a").removeClass("selectedProd");
$(this).addClass("selectedProd");
$("#productListCntnr > ul").slideUp(300);
$("#productListCntnr > ul."+this.id).slideDown(300);
});
【问题讨论】：
标签： javascript jquery prototypejs
我不确定处理您正在执行的滑动操作的最佳方法，但这应该可以完成单击和添加/删除 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").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 只是为了确认它正在工作。我不得不使用上面提到的替代语法，因为原始语法根本不起作用（出现错误，例如元素上不存在调用方法）。
我猜原始代码是打算将 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>
【讨论】：