如何打开带有类而不是 id 的 jQuery 对话框？答案

【问题标题】：How do I open a jQuery dialog with a class instead of an id?如何打开带有类而不是 id 的 jQuery 对话框？
【发布时间】：2012-12-25 04:35:50
【问题描述】：

我在一个页面上有很多链接，我只需要打开几个 jQuery 对话框。如何使用类而不是 id 打开它们？

这是我的脚本：

    <script>
    // increase the default animation speed to exaggerate the effect
    $.fx.speeds._default = 1000;
    $(function() {
        $( "#selectFolder" ).dialog({position:['middle',60],        
            open: function(event, ui) {  
            jQuery('.ui-dialog-titlebar-close').removeClass("ui-dialog-titlebar-close").html('<span style="float:right;"><img src="../images/x.png" /></span>');  
        },  
            dialogClass: 'ui-widget-shadow',
            modal: true,    
            autoOpen: false,
            width: '650px',
            close: function(ev, ui) {$(this).close();}      
        });

        $( "#selectFolderOpen" ).click(function() {
            $( "#selectFolder" ).dialog( "open" );
            return false;
        });
    });
    </script>
<div style="display:none;">
    <div id="selectFolder" title="Select Folder">
        <div style="display:block;">
            <!--#include file="sidebar_modal_questions_folder_select.asp"-->
        </div>
    </div>
</div>

以下是当前有效的示例：

<a href="#" class="buttonintable" id="selectFolderOpen">Select Folder</a>

我希望它像这样工作：

<a href="#" class="buttonintable selectFolderOpen">Select Folder</a>

这样我就不必为我希望打开的每一个链接都添加 ID。

我知道您使用 ('#selector') 和 id 和 ('.selector') 作为类 - 但我无法让它工作。有什么帮助吗？

【问题讨论】：

标签： jquery html class dialog

【解决方案1】：

这里是一个例子：http://jsfiddle.net/WVVXy/

$(function () {
  $("a.buttonintable").click(function () {
    $(this).dialog();
    return false;
  });
});

【讨论】：

【解决方案2】：

我回答了我自己的问题。这是工作代码：

<script>
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
    $( "#selectFolder" ).dialog({position:['middle',60],        
        open: function(event, ui) {  
        jQuery('.ui-dialog-titlebar-close').removeClass("ui-dialog-titlebar-close").html('<span style="float:right;"><img src="../images/x.png" /></span>');  
    },  
        dialogClass: 'ui-widget-shadow',
        modal: true,    
        autoOpen: false,
        width: '650px',
        close: function(ev, ui) {$(this).close();}      
    });

    $( "a.selectFolderOpen" ).click(function() {
        $( "#selectFolder" ).dialog( "open" );
        return false;
    });
});
</script>

使用：

<a href="#" class="buttonintable selectFolderOpen">Select Folder</a>

【讨论】：

可以删除选择器a.selectFolderOpen 中的a。也许以后你想把它变成一个跨度或其他什么原因：p我倾向于只使用类名而不是那么狭窄的范围。

【解决方案3】：

将您的选择器更改为$('.selectFolderOpen').click(...)

jQuery 选择器可以选择您可以在 CSS 选择器中定位的任何内容。它使用# 表示一个id，并使用.（点）表示一个类。

【讨论】：