Reducing duplicated code with JQuery function

Question

Found a good jquery popup function here:

 JAVASCRIPT
 $(function() {
    $(\"#word1234\").live(\'click\', function(event) {
        $(this).addClass(\"selec         


        

Answer 1

You could turn the code into a jQuery Plugin like this:

$.fn.myPopup = function(popupText){
    var popupHtml = '
' + popupText + '
';
    this.each(function(){
        $(this).click(function(){

            // Create the popup
            $(this).addClass("selected").parent().append(popupHtml);

            // Find the close button and attach click handler
            $(this).find(".close").click(
                // Find, hide, then delete the popup
                $(this).closest(".pop").slideFadeToggle().remove();;
            );

        });
        return false;
    });

    return this;
};

Then your code would look like this:

$("#word1234").myPopup("Lorem Ipsum");
$("#wordABCD").myPopup("Hello World");