将 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>