Question

我有一个带有两个链接的div：

<div id="copyrightFooter">
    <p>Copyright &copy; 2011 MY Company, LLC. All rights reserved. please review our 
        <a  id="privacyPolicy" style="color: #9DB2E7;font-weight:bold" href="#">Privacy Policy</a> and our <a id="terms" style="color: #9DB2E7;font-weight:bold" href="#">Terms of Use</a>
    </p>
</div> <!-- copyrightFooter-->

我目前正在使用JQuery捕获这两个链接的点击次数：

jQuery(function ($) {
    // Load dialog on page load

    // Load dialog on click
    $('#copyrightFooter a ').click(function (e) {
        $('#basic-modal-content').modal();
        return false;
    });

});

问题是，此代码适用于两个链接。我想“切换/大小写”我点击的ID，以便我可以模态对话不同的DIV。我什么都不做？ “警告”ID会带回“未定义”或类似的东西，因此切换案例不起作用。我做错了什么？

Answer 1

$('#copyrightFooter a ').click(function (e) {
    alert($(this).attr('id'));
});

应该可以正常工作。

Answer 2

在事件处理函数中使用this将为您提供对单击元素的引用。例如，要获取所单击元素的id，您可以执行以下操作：

$('#copyrightFooter a ').click(function (e) {
    var clickedID = this.id;
});

您也可以使用jQuery的$(this).attr("id");，但是当一个简单的纯JavaScript语句就足够时，不需要过度使用jQuery。

Answer 3

jQuery(function ($) {
    // Load dialog on page load

    // Load dialog on click
    $('#copyrightFooter a ').click(function (e) {
        if($(this).attr("id") == "privacyPolicy")
        {
            alert("display Modal 1");
        }else  if($(this).attr("id") == "terms"){
          alert("display Modal 2");
        }

        return false;
    });

});

使用$（this）.attr（“id”）;获取你点击的div的id。

以下是一个工作示例：http://jsfiddle.net/HPsgE/

Answer 4

$('#copyrightFooter a').click(function (e) {

    switch($(this).attr('id')){
        case 'privacyPolicy': id = '#basic-modal-content'; break;
        case 'terms': id = '#basic-modal-content'; break;
    }

    $(id).modal();
    return false;

});

Answer 5

您可以像这样检查ID：

$('#copyrightFooter a ').click(function (e) {
    if(this.id=="privacyPolicy"){
        ..
    }
    else{
        ..
    }
});

Answer 6

你可以这样做：

$('#copyrightFooter a ').click(function (e) {
    var id = $(this).attr("id");
    switch(id){
        case "privacyPolicy": 
            ... 
           break;  
        case "terms": 
           ... 
           break;
    }        
    return false;
});

希望这会有所帮助。干杯

如何判断使用JQuery单击哪个Anchor？

6 个答案: