在 jquery 中单击相应的类打开一个对话框答案

【问题标题】：Open a dialog form on clicking on the respective Class in jquery在 jquery 中单击相应的类打开一个对话框
【发布时间】：2011-09-26 12:31:47
【问题描述】：

我有这个 jsfiddle http://jsfiddle.net/DgauY/1/ 当元素被拖放到内容区域时，它会添加两个项目。一个是 X 元素，用于删除已删除的元素，另一个是属性链接。我想要实现的是在单击相应的属性链接时打开不同的对话框表单，该链接具有基于其包含的元素的类。就像我放了一个文本框然后查看属性类是 txtbox 当我单击属性时我应该有一个对话框表单，其中包含与标签等文本框相关的选项... 我希望我没有混淆......

【问题讨论】：

欢迎来到 StackOverflow！实时链接是一个很好的辅助问题，但也总是发布相关代码在问题中。（另外：你确定那是正确的小提琴吗？）两个原因： 1. 人们不应该通过链接来帮助你。 2. StackOverflow 不仅是为您现在提供的资源，也是为将来遇到类似问题的其他人提供的资源。外部链接可能会被移动、修改、删除等。通过确保问题中包含相关代码，我们可以确保问题（及其答案）在合理的时间内保持有用。

标签： javascript jquery-ui jquery-selectors jquery-ui-dialog

【解决方案1】：

很难弄清楚你在问什么。 听起来好像你在问如何通过打开不同的对话框来响应点击不同类的不同“属性”链接。这将是微不足道的：只需使用 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;
});

【讨论】：