用jQuery寫簡單的語句，我怎麼會寫這與PrototypeJS

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

雖然我在思考這個標誌已經回答了，但我想出了以下內容：

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

--edit

以下標誌的評論我已經與上面的代碼中去，在實際的瀏覽器，這裏是一個工作版本：

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 }); 
    }); 
}); 

我不知道是什麼效果基本show是應該做的事情，所以我把它，我認爲它不像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>