附加JQuery點擊功能鏈接類

Question

我是jquery的新手，並且對如何將點擊功能附加到鏈接類有點困惑。

本來，我附的onClick功能鏈接ID本身如下：

<div class="summary" style="display:none"></div> 
<a id="moreAbout" href="#" >More about #{machine.client_name}</a> 

<script> 
    "#moreAbout".onClick(function(event) { 
    event.stop(); 
    $$('.summary')[0].slide(); 
    $$('.summary')[0].load("/machine"); 
    }); 
</script> 

和功能的工作就好了。 （基本上，有一個鏈接，你點擊顯示和隱藏div）

現在，我需要將相同的功能附加到多個鏈接。我已經嘗試了我可以找到的每個提示，並且我認爲將該功能附加到鏈接類可能存在問題。

最流行的解決方案，我發現如下：

<div class="summary" style="display:none"></div> 
<a class="moreAbout" id="alink" "href="#" >More about #{machine.client_name}</a> 

<script> 
    $('a.moreAbout').click(function(event) { 
    event.stop(); 
    $$('.summary')[0].slide(); 
    $$('.summary')[0].load("/machine"); 
    }); 
</script> 

我似乎無法使該方法連接，更不用說確保功能的作品。

任何洞察爲什麼這可能無法正常工作？

Answer 1

使用與轉換索引爲DOM對象

slide和load是jQuery的對象可用的方法。因此，您需要再次將DOM轉換爲jQueryObject以使其正常工作。

也只有一個$就足夠了。

$($('.summary')[0]) - >需要再次轉換爲jQuery對象

代碼

$('a.moreAbout').click(function(event) { 
    event.preventDefault(); 
    var $summary = $($('.summary')[0]); 
    // The DOM object again converted to jQuery object and stored in 
    // $summary variable. 
    // Now you can apply jQuery method for this object 

    $summary.slide(); 
    $summary.load("/machine"); 
}); 

Answer 2

嘗試以下操作：

<script> 
$(document).ready(function(){ //this makes sure the dom is loaded 
    $('a.moreAbout').click(function(event) { 
    event.preventDefault(); //prevent the default action 
    $(this).prev('.summary').slideDown(); //only one $ needed, get the prev parent, 
     //slide is not an event, use slideDown() 
    $(this).prev('.summary').load("/machine"); 
    }); 
}); 
</script>