jQuery – 如何确定单击了哪个链接

我有一个简单的PHP片段,它生成以下代码的n个副本:

<p class="ShowSDB_L2" class="center" onClick="FSD_L2('','')">Click Here to See Data

它是使用PHP生成的,因此预先知道副本的数量。

在另一个页面上我有以下Javascript(使用jQuery)

 function FSD_L2(dbG,SlID) { $(".divSDB_L2").load("test15.php?dbG="+dbG+"&SlID="+SlID).css('display','block'); } 

单击上面的文本(单击此处查看数据)时,应在两个DIV标记之间添加test15.php的内容。

 #Test15.php  

我遇到的问题是如何确定点击了哪些链接? 目前,如果我有三个副本,然后单击一个,则会激活所有三个副本。

我希望我已经说清楚了。 我确信必须有一个简单的方法,但我对Javascript / jQuery很新。

我不确定我是否完全理解你遇到困难的是什么,但以下是我将如何做到这一点。

 

Click Here to See Data

$(document).ready(function() { $(document).on('click', 'p.ShowSDB_L2', function(evt) { var $p = $(evt.currentTarget), dbG = $p.data('dbg'), slid = $p.data('slid'), $div = $p.next(); FSD_L2(dbG, slid, $div); }); }); function FSD_L2(dbG, SlID, $div) { $div.load("test15.php?dbG="+dbG+"&SlID="+SlID).css('display','block'); }

点击处理程序未硬编码到每个p标记。 而是使用每个p标记,我们存储所需的数据 ,即dbgslid

然后在document ready附加一次单击处理程序。 jQuery在各种浏览器上进行抽象,并将event对象作为其第一个参数传递给其处理程序。 然后,可以使用此对象查找发生事件的元素。 参考: http : //api.jquery.com/on/

最后,我们从点击的元素中获取所需的数据,找到需要更新的div ,然后调用自定义函数。

就像Brian说的那样,您可以在所有链接上放置相同的类,并在单击函数中使用jQuery中的$(this)关键字来查找单击的链接。

以下是使用此技术更改导航链接颜色的基本示例: http : //jsfiddle.net/9E7WW/

HTML:

 Test Test2 Test3 Test4 

使用Javascript:

 $(document).ready(function(){ $('.nav').click(function(){ // change all to black, then change the one I clicked to red $('.nav').css('color', 'black'); $(this).css('color', 'red'); }); }); 

这是一种跨浏览器的方式来查找触发事件的元素(目标)(e):

 function getTarget(e){ // non-ie or ie? e=e||window.event; return (e.target||e.srcElement); }; 

使用数据属性将完整的URL添加到链接(或本例中为p ):

 

Click Here to See Data

然后直接在jQuery中执行所有绑定,这样您就可以直接访问被单击的链接:

 $(document).ready(function() { $('.ShowSDB_L2').on('click', function(e) { e.preventDefault(); $('.divSDB_L2').empty().load($(this).data('loadurl')).show(); }); });