javascript - 如何重用javascript代码来显示弹出窗口

Question

我有一个表格，其中每一列都包含对一个人的引用。当用户单击每个链接时，我想显示一个弹出窗口，显示每个人的简短简历。弹出窗口应显示在用户单击的位置旁边。

我发现了一些使用 jquery 和 qtip 的示例，我遇到的问题是对于每个人的弹出窗口，我必须复制所有的 javascript 代码，我认为必须有一种方法来重用它，因为它几乎是一样的，唯一改变的是内容、标题和 div id:

这是 jsFiddle .

这里是html代码:

    <table border="1">
    <tr>
        <td>
            <div id="johndoe" style="background-color: #f0f0f0; width: 50%; margin: 2em">John Doe</div>
        </td>
                <td>
            <div id="janedee" style="background-color: #f0f0f0; width: 50%; margin: 2em">Jane Dee</div>
        </td>
    </tr>
</table>

和 Javascript:

    $(document).ready(function () {
    $("#johndoe").qtip({
        content: {
            text: "Here goes John Doe's short bio blah blah",
            title: {
                text: "Title",
                button: true
            }
        },
        position: {
            target: 'mouse',
            viewport: $(window),
            adjust: {
                method: 'flip shift',
                mouse: false
            }
        },
        style: {
            tip: false,
            widget: false
        },
        show: {
            event: 'click',
            solo: true
        },
        hide: {
            fixed: true,
            event: 'unfocus'
        }
    });
});
$(document).ready(function () {
    $("#janedee").qtip({
        content: {
            text: "Here goes Jane Dee's short bio blah blah",
            title: {
                text: "Title",
                button: true
            }
        },
        position: {
            target: 'mouse',
            viewport: $(window),
            adjust: {
                method: 'flip shift',
                mouse: false
            }
        },
        style: {
            tip: false,
            widget: false
        },
        show: {
            event: 'click',
            solo: true
        },
        hide: {
            fixed: true,
            event: 'unfocus'
        }
    });
});

我对 jquery 的经验不多，所以我想问问专家们，你们如何用尽可能少的 javascript 代码来解决这个问题？就像复用函数一样，只是传递每个人的内容、标题和 div id。

提前致谢!

Answer 1

尝试数据 API 和多重选择器:

<div id="johndoe" data-title="text">John Doe</div>
<div id="janedee" data-title="text">Jane Dee</div>

$("#johndoe, #janedee").qtip({
    content: {
        text: $(this).data('title'),
        title: {
            text: "Title",
            button: true
        }
    },
    ...
});

应该这样做。