Question

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

工具提示应包含三个项目：

向上：锚点，它应该向上移动OuterDiv（可能是这样的：move up/down in jquery）
向下：锚点，应该将OuterDiv向下移动
删除：锚点，应删除调用的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函数应如何显示？

Answer 1

我的解决方案可以在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();
                })
            }
        }
    })
});

使用qTip操作原始元素

1 个答案: