Откройте диалоговую форму, нажав на соответствующий класс в JQuery - PullRequest
Новая
       18

Откройте диалоговую форму, нажав на соответствующий класс в JQuery

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

у меня есть этот jsfiddle http://jsfiddle.net/DgauY/1/ который добавляет два элемента при удалении элемента в области содержимого. Один элемент X удаляет удаленный элемент, а другой - ссылку Свойства. Чего я хочу добиться, так это открывать различные диалоговые формы, нажимая на соответствующую ссылку Свойства, в которой есть класс, основанный на элементе, который он содержит. Как и я, я опустил текстовое поле, а затем посмотрел на класс свойств, который является txtbox, когда я щелкаю на свойствах, у меня должна быть диалоговая форма, которая содержит параметры, относящиеся к текстовому полю, такие как метка и т. д. я надеюсь, что я не путаю ...

1 Ответ

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

Очень трудно понять, о чем ты спрашиваешь. Это звучит , как будто вы спрашиваете, как реагировать на клики по разным ссылкам «свойств» разных классов, открывая разные диалоговые окна. Это было бы тривиально: просто подключите событие click к соответствующим ссылкам "свойств", используя bind (click), delegate или live: 

$("a.type1").click(function() {
    // Open the dialog for type1
    // ...

    // Prevent the default action of the link
    return false;
});
$("a.type2").click(function() {
    // Open the dialog for type2
    // ...

    // Prevent the default action of the link
});

(И снова, вы можете использовать delegate или live вместо привязки события к самим элементам, если оно вообще динамическое.)

Или, если вы хотите использовать общий обработчик для всех типов и ветвей в обработчике, вы можете сделать это: 

$("a.type1, a.type2, a.type3").click(function() {
    // ...code all of them have in common...
    // ...

    // Branch on what class(es) the link has and open the relevant dialog
    // ...

    // ...more code all of them have in common...
    // ...

    // Prevent the default action of the link
    return false;
});

Вы можете использовать несколько классов (поэтому каждая ссылка имеет как "props", так и "type1" или "type2" и т. Д.)

Если вы имеете в виду, что ссылки не будут на самом деле имеют разные типы, но вы хотите перейти к тому, что находится в том же контейнере, или к чему-либо, вы можете использовать closest, чтобы перейти контейнер, который вы хотите, затем find и / или children, чтобы узнать, что находится в контейнере: 

$("a.props").click(function() {
    var container = $(this).closest('div'); // If the container is a div
    if (container.find("textarea")[0]) {
        // It has at least one text area, show dialog...
    }
    else if (container.find("input[type=text]")[0]) {
        // It has at least one text input, show dialog...
    }
    else if (container.find("input[type=button]")[0]) {
        // It has at least one `input`-style button, show dialog...
    }
    // else etc.

    // Prevent the default action of the link
    return false;
});
...