附加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>