Question

这是前一个问题的扩展，已得到解答。但是有不同的需求/问题。这是jquery代码：

$("#deletec-box").dialog({
    autoOpen: false,
    resizable: false,
    height:230,
    modal: true,
    buttons: {
        "Confirm": function() {
            window.location = $('#deletec-confirm').attr('href');
            $(this).dialog("close");
        },
        Cancel: function() {
            $(this).dialog("close");
        }
    }
});

$("#deletec-confirm").click(function() {
    $("#deletec-box").dialog("open");
    return false;
});

以下是原始链接：

<a href="?action=delc&cid=2" id="deletec-confirm">Delete</a>

但我在一个页面上有多个具有相同ID的链接。所以我将链接更改为：

<a href="?action=delc&cid=2" id="deletec-confirm10">Delete</a>
<a href="?action=delc&cid=2" id="deletec-confirm9">Delete</a>
<a href="?action=delc&cid=2" id="deletec-confirm12">Delete</a>

如何动态获取用户点击的链接以获取对话框？现在它得到了这样的网址：

window.location = $('#deletec-confirm').attr('href');

我是否将ID更改为链接中的类？或者是否有另一种动态选择链接ID的方法，以便我可以为每个链接保留id =属性？

旁注，如果认为这是重复的，请告诉我我需要做什么。

Answer 1

我建议您对所有链接使用通用class。像这样：

<div id="deletec-box">Are you sure you want to delete?</div> 
<a href="?action=delc&cid=2" class="deletec-confirm">Delete</a>
<a href="?action=delc&cid=2" class="deletec-confirm">Delete</a>
<a href="?action=delc&cid=2" class="deletec-confirm">Delete</a>

然后，您可以使用.data()

存储“点击的链接”

$("#deletec-box").dialog({
    ...
    buttons: {
        "Confirm": function(idx) {
            window.location = $('#deletec-box').data('openerLink').attr('href');
            $(this).dialog("close");
        },
        ...
    }
});

//By binding with a class, you bind once for all
$(".deletec-confirm").click(function() {
    $("#deletec-box").data("openerLink", $(this)); //Store the link in the dialog
    $("#deletec-box").dialog("open");
    return true;
});

使用.data()的优点是您不使用全局变量，只存储您想要的内容。

希望这有帮助。

Answer 2

如果您想要遵守HTML / XHTML标准，则需要调整id属性以使其唯一，或者删除它们并为您的选择器使用类，就像我在下面的示例中所做的那样

这是一种基本方法，可以提醒href属性值，并根据需要进行调整：

var $sender;

$("#deletec-box").dialog({
    ...
    buttons: {
        "Confirm": function(idx) {
            alert($sender.attr('href'));
            $(this).dialog("close");
        },
        ...
    }
});

$(".deletec-confirm").click(function() {
    $sender = $(this);
    $("#deletec-box").dialog("open");
    return true;
});

结合此HTML作为示例：

<div id="deletec-box">Are you sure you want to delete?</div> 
<a href="#1" class="deletec-confirm">Delete</a> 
<a href="#2" class="deletec-confirm">Delete</a>

Jquery，获取对话框的动态属性

2 个答案: