Selectors that can be applied to multiple IDs with identical functions

Question

Selectors that can be applied to multiple IDs with identical functions

I have a script for popups that I want to be able to use multiple instances of. For example, I would like to have 5 popups on one page without having to change the JavaScript code.

While everything in the script works fine, I am struggling to make it work under multiple instances.

I would like the script to target elements with ids starting with 'popup_', so that I can have popups named popup_one, popup_two, and so on, without needing to modify or add to the JavaScript code.

Any assistance would be greatly appreciated.

javascript jquery html css

Answer 1

Answer №1

To target elements using class selectors, start by returning each element in your plugin to match multiple elements.

    $.fn.expose = function(options) {
       return this.each(function() {
         var $modal = $(this),
         $id = $(this).attr("id");
         $trigger = $("a[href=#" + $id + "]");
         //...rest of the stuff
       }     
    }

When defining divs, assign a class name to them

    <div id="Popup_normal" class="Modal expose_modal" >
      //rest of stuff
    </div>

Finally, call the function using a class selector

$(".expose_modal").expose();

VIEW DEMO

Answer 2

To target elements using class selectors, start by returning each element in your plugin to match multiple elements.

    $.fn.expose = function(options) {
       return this.each(function() {
         var $modal = $(this),
         $id = $(this).attr("id");
         $trigger = $("a[href=#" + $id + "]");
         //...rest of the stuff
       }     
    }

When defining divs, assign a class name to them

    <div id="Popup_normal" class="Modal expose_modal" >
      //rest of stuff
    </div>

Finally, call the function using a class selector

$(".expose_modal").expose();

VIEW DEMO

Answer 3

Answer №2

To implement the desired functionality, simply utilize the code below:

$("#Popup_normal").expose();

You only need to provide an id for this function and there is no requirement to modify the javascript .expose() function.

Answer 4

To implement the desired functionality, simply utilize the code below:

$("#Popup_normal").expose();

You only need to provide an id for this function and there is no requirement to modify the javascript .expose() function.

Selectors that can be applied to multiple IDs with identical functions

Answer №1

Answer №2

Similar questions

The focal point of a Three JS rotation

Discover the power of AngularJS's ng-route feature for creating a dynamic and seamless one-page HTML template experience

Set up AngularJS application to save API URLs

Unable to fetch the identification number from the database

Delaying the activation of the code until the image upload is complete

Mastering the correct application of flex properties within nested flex containers

Navigating through Objects in Angular 9

Switch back and forth between different information

Is there a way to rearrange the tabs so that the first tab is at

Split a lengthy inventory into separate pages using EJS in combination with jQuery and AJAX

What could be causing my div element to not inherit its parent div's width?

Tips for creating a div that gracefully fades out its background image when hovered over, while keeping the internal content unaffected

Guide on using double quotation marks for keys and values in a JavaScript array

Any suggestions on how to address vulnerabilities in npm when upgrading the main dependency version is not an option?

Trigger a JavaScript event when attempting to input the maximum number of characters

Different style sheets & Susy: Tailored designs for varying orientations

Hovering over graphics for automatic scrolling

Strategies for efficiently updating specific objects within a state array by utilizing keys retrieved from the DOM

QML: Inside and outside styling attributes

Typescript's Nested Type Assignments