Question

我有以下qtip代码，当点击链接时会生成一个弹出窗口。有没有办法使用jquery我可以从代码中提取id等于“test2”的链接是否被点击？

非常感谢，詹姆斯

<ul>
<li><a id="test1" href="">example 1</a></li>
<li class="PopRequired"><a id="test2" href="">example 2</a></li>
<li><a id="test3" href="">example 3</a></li>
<li><a id="test4" href="">example 4</a></li>
</ul>



$('ul li.PopRequired').each(function () {
    $(this).qtip(
    {
        content: {
            text: '<a href="">example text here',
            title: {
                text: true,
                button: '<img src="/images/close_Icon.gif">'
            }
        },
        position: {
            corner: {
                target: 'rightMiddle',
                tooltip: 'leftMiddle'
            },
            adjust: {
                screen: true
            }
        },
        show: {
            when: 'click',
            solo: true
        },
        hide: 'unfocus',
        style: {
            tip: true,
            border: {
                width: 0,
                radius: 4,
            },
            width: 264,
            height: 195,
            title: { 
                background: '#ffffff'
            },
            lineHeight: '16px'
        }
    })
});

Answer 1

您可以在a-tags上放置一个点击处理程序，并使用

轻松获取ID

 jQuery(this).attr('id')

以检索属性值。

但是，为所有锚标签分配ID可能会带来限制，因为它可能只发生一次。

也许更好，你也可以使用数据属性（在你的情况下是一个ID）和你的元素来存储你的id / ref。它将存储为data-x属性。

例如：

 <a href="#" data-uniqueid="ABC">my link</a>

您可以使用$（this）.data（'uniqueid'）检索的ID ABC;此刻有人点击链接。

Answer 2

我不确定我是否真的得到你想要的东西。

我为您准备了一个jsFiddle（http://jsfiddle.net/neysor/YCTzb/）集合，其中显示了如何在qtip工具提示中选择数据。全部使用qTip2 Library

HTML

<a id="id1" href="#">Text 1</a>
<a id="id2" href="#">Text 2</a>
<a id="id3" href="#">Text 3</a>
<button data-info="This is">Text 4</button>
<button data-info="with more">Text 5</button>
<button data-info="Information">Text 6</button>

的Javascript

$(document).ready(function() {
    $('a').button().qtip({
        content: {
            text: function() {
                return "Text: " + $(this).text() + "<br>ID: " + $(this).attr("id");
            },
            title: {
                text: 'Modal qTip for Links',
                button: true
            }
        },
        show: {
            event: 'click',
            solo: true,
            modal: true
        },
        position: {
            my: 'center', // ...at the center of the viewport
            at: 'center',
            target: $(window)
        },
        hide: false,
        style: 'ui-tooltip-light ui-tooltip-rounded'
    });
    $('button').button().qtip({
        content: {
            text: function() {
                return $(this).attr("data-info");
            },
            title: {
                text: 'Modal qTip for Buttons',
                button: true
            }
        },
        show: {
            event: 'click',
            solo: true,
            modal: true
        },
        position: {
            my: 'center', // ...at the center of the viewport
            at: 'center',
            target: $(window)
        },
        hide: false,
        style: 'ui-tooltip-light ui-tooltip-rounded'
    });

}）;

如何使用qtip触发弹出窗口

2 个答案:

HTML