使用qTip操作原始元素

Manipulating original elements with qTip

本文关键字：元素原始操作 qTip 使用更新时间：2023-09-26

我的页面上有一堆div，每个div只有class属性。div中有一些span，它们被设置为在qTip的帮助下显示工具提示。

工具提示应该包含三个项目:

Up:锚，它应该向上移动OuterDiv(可能像这样:在jquery中向上/向下移动)
Down:锚，它应该向下移动OuterDiv
Delete: anchor，它应该删除调用的OuterDiv

我的代码:

<body>
    <div class="OuterDiv">
        <div class="InnerDiv">
            <span class="Position">Position 1</span>
        </div>
    </div>
    <div class="OuterDiv">
        <div class="InnerDiv">
            <span class="Position">Position 2</span>
        </div>
    </div>
</body>

和脚本:

$(document).ready(function () {
            var qTipContent = '<a href="javascript:void(0)" onclick="">&uarr;</a>&nbsp;&nbsp;&nbsp;';
            qTipContent = qTipContent + '<a href="javascript:void(0)" onclick="">&darr;</a>&nbsp;&nbsp;&nbsp;';
            qTipContent = qTipContent + '<a href="javascript:void(0)" onclick="">X</a>';
            $('.Position').each(function () {
                $(this).qtip({
                    content: qTipContent,
                    hide: {
                        fixed: true
                    }
                })
            });
        });

qTip内容中的onclick函数应该是什么样子?

我的解决方案可以在这个jsFiddle中找到-除了清理qTipContent(只是真的很乱)，唯一真正值得注意的添加是为锚添加id，并使用qTip api在添加qTip窗口时为每个锚添加单击事件绑定。

$('.Position').each(function(idx, elem) {
    $(this).qtip({
        content: qTipContent,
        show: {
            when: {
                event: 'click'
            }
        },
        hide: {
            fixed: true,
            when: {
                event: "unfocus"
            }
        },
        api: {
            onRender: function() {
                var $qtip = $(this.elements.content);
                var odiv = $(elem).closest(".OuterDiv");
                $("#up_arrow", $qtip).click(function() {
                    odiv.insertBefore(odiv.prev());
                })
                $("#down_arrow", $qtip).click(function() {
                    odiv.insertAfter(odiv.next());
                })
                $("#delete", $qtip).click(function() {
                    odiv.remove();
                })
            }
        }
    })
});