Jquery, получить динамический атрибут для диалогового окна - PullRequest
Новая
       6

Jquery, получить динамический атрибут для диалогового окна

1 голос
/ 07 июля 2011

Это расширение предыдущего вопроса, на который был дан ответ. Но есть другая потребность / проблема. Вот код 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>

Но у меня есть несколько ссылок на одну страницу с одним и тем же идентификатором. Поэтому я изменил ссылку на: 

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

Как я могу динамически получить ссылку, по которой щелкнул человек, чтобы открыть диалоговое окно? Прямо сейчас он получает URL-адрес примерно так: 

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

Могу ли я изменить идентификатор на класс в ссылке? Или есть другой способ динамического выбора идентификатора ссылки, чтобы я мог сохранить атрибут id = для каждой ссылки?

Примечание: если это считается дубликатом, пожалуйста, дайте мне знать, что мне нужно сделать.

Ответы [ 2 ]

2 голосов
/ 07 июля 2011

Я рекомендую использовать общий 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() состоит в том, что вы не используете глобальные переменные и храните то, что хотите, только там, где хотите.

Надеюсь, это поможет.

0 голосов
/ 07 июля 2011

Если вы хотите придерживаться стандартов 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>
...