jQuery-将参数传递给函数

Question

I want to pass an ID to a function that turns it to a "flyout".

My base code is:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="target_anchor1" href="#" title="XXXXXXXXXX">test 1</a> <script type="text/javascript"> $(function() { $('#target_anchor1').flyout({ title: '', content: function() { return document.getElementById('target_anchor1').title; }, html: true, dismissible: true }); }); </script> 

I want to do this dynamically, so I tried a function. Function gets the parameter but does not create the flyout.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="target_anchor1" href="#" title="XXXXXXXXXX" onclick="anchorFlyout(this.id)">test 1</a> <a id="target_anchor2" href="#" title="YYYYYYYYYY" onclick="anchorFlyout(this.id)">test 2</a> <a id="target_anchor3" href="#" title="ZZZZZZZZZZ" onclick="anchorFlyout(this.id)">test 3</a> <script type="text/javascript"> function anchorFlyout(paramId) { alert(paramId); $('#' + paramId).flyout({ title: '', content: function() { return document.getElementById(paramId).title; }, html: true, dismissible: true }); } </script> 

Code is taken from http://www.jqueryscript.net/demo/Simple-Customizable-Tooltip-Popover-Plugin-Flyout

Any idea?

Answer 1

Just make a regular function and have jquery statements in it:

function anchorFlyout(paramId) {
    $("#" + paramId).flyout({
        title: '',      
        content: function() {
            return document.getElementById(paramId).title;
        },
        html: true,
        dismissible: true
    });
};
anchorFlyout("target_anchor1")

Answer 2

Do you just want to be able to pass an ID to a function that turns it to a "flyout"?

function createFlyout(elementID) {
    $("#"+elementID).flyout({
        title: '',      
        content: function() {
            return document.getElementById(elementID).title;
        },
        html: true,
        dismissible: true
    });
}

---

Or you could use a custom JQuery function...

$.fn.createFlyout = function() {

    this.flyout({
        title: '',      
        content: function() {
            return this.attr("title");
        },
        html: true,
        dismissible: true
    });

    return this;
}

$("#myDiv").createFlyout();