Question

我是jquery的新手，对于如何将click函数附加到链接类有点困惑。

最初，我将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 Objects上可用的方法。因此，您需要再次将DOM转换为jQueryObject以使其正常工作。

也只有一个$就足够了。

$( $('.summary')[0] ) - ＆gt;需要再次转换为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>

将JQuery单击函数附加到链接类

2 个答案: