1

我是 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>

而且我似乎无法附加该方法，更不用说确保该功能正常工作了。

任何洞察为什么这可能不起作用？

4

2 回答 2

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");
});
于 2013-08-06T23:36:51.157 回答
0

尝试以下操作：

<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>
于 2013-08-06T23:37:06.280 回答