Question

我有一个简单的PHP片段，可以生成以下代码的 n 副本：

<p class="ShowSDB_L2" class="center" onClick="FSD_L2('<?php print dbG;?>','<?php print $sLID;?>')">Click Here to See Data</p>   
<div class="divSDB_L2">
</div>

它是使用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
<?php
$dbG = $_GET['dbG'];
$SlID = $_GET['SlID'];

print $dbG . " & " . $SlID;
?>

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

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

Answer 1

就像Brian说的那样，您可以在所有链接上放置相同的类，并在点击功能中使用jQuery中的$(this)关键字来找出点击的链接。

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

HTML：

<a class="nav">Test</a>
<a class="nav">Test2</a>
<a class="nav">Test3</a>
<a class="nav">Test4</a>

使用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');
    });
});

Answer 2

我不确定我是否完全理解你遇到的困难，但以下是我将如何做到的。

<p class="ShowSDB_L2" class="center" data-dbg="<?php print dbG;?>" data-slid="<?php print $sLID;?>">Click Here to See Data</p>   
<div class="divSDB_L2"></div>

$(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代码都会存储所需的data，即dbg＆amp; slid。

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

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

Answer 3

这是一种跨浏览器的方式来查找触发事件（e）的元素（目标）：

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

Answer 4

使用数据属性将完整的网址添加到您的链接（或在这种情况下为p）：

<p class="ShowSDB_L2" class="center" data-loadurl="test15.php?dbG=<?php echo $dbG; ?>&SlID=<?php echo $SlID; ?>">Click Here to See Data</p> 

<div class="divSDB_L2"></div>

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

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

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

4 个答案: