Javascript 用qTip处理原始元素_Javascript_Jquery_Html_Qtip

Javascript 用qTip处理原始元素

javascript jquery html

Javascript 用qTip处理原始元素,javascript,jquery,html,qtip,Javascript,Jquery,Html,Qtip,我的页面上有一堆div，每个div都只有class属性。在div中有一些跨距，这些跨距设置为在qTip的帮助下显示工具提示工具提示应包含三项： Up:anchor，它应该将OuterDiv向上移动（可能是这样的：）向下：锚定，该锚定应向下移动外层 Delete:anchor，它应该删除调用OuterDiv 到目前为止，我的代码是： <body> <div class="OuterDiv"> <div class="InnerDiv"&

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

工具提示应包含三项：

Up:anchor，它应该将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>


位置1
位置2

和脚本：

$(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
                    }
                })
            });
        });

$（文档）.ready（函数（）{
var qTipContent=''；
qTipContent=qTipContent+''；
qTipContent=qTipContent+''；
$（'.Position'）。每个（函数（）{
$（此）.qtip({
内容：qTipContent，
隐藏：{
修正：正确
}
})
});
});

qTip内容中的

onclick

函数应该是什么样子的？

我的解决方案可以在这里找到-除了清理qTip内容（非常混乱），唯一值得注意的是向锚添加ID，在添加qTip窗口时，使用qTip api为每个锚点的click事件添加绑定

$('.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();
                })
            }
        }
    })
});

我的解决方案可以在这里找到——除了清理qTip内容（非常混乱），唯一值得注意的是向锚添加ID，并在添加qTip窗口时使用qTip api为每个锚添加click事件绑定

$('.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();
                })
            }
        }
    })
});