Question

I have many links on a page that I need to open only a few jQuery dialogs with. How do I open them using a class instead of an id?

Here is my script:

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

And here is an example of what currently works:

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

I want it to work like this:

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

That way I do not have to id every single link I want it to open in.

I know that you use a (‘#selector’) for and id and (‘.selector’) for a class – but I cannot get it to work. Any help?

Answer 1

Change your selector to $('.selectFolderOpen').click(...)

jQuery selectors can select anything that you would be able to target in a CSS selector. It uses # to denote an id, and a . (dot) to denote a class.