Question

我在这里创造了一个小提琴：

http://jsfiddle.net/ozzy/paPRg/1/

基本上，我希望允许用户将鼠标悬停在某个链接上，系统会显示面板，他们可以点击该面板上的链接，该链接会添加到输入字段中。

此外，我真的需要让LINKS充满活力。

想知道是否有人知道：

点击链接网址，将其放置在文本字段中。
如果他们点击OWN LINK，它会关闭面板并将焦点放在输入字段中。
如何使这个动态化，所以如果我们想在一个页面上有两个或更多这些...我将如何使脚本动态，所以它并不意味着大量重复的javascript。

目前链接ID为id =“demo-basic”

任何帮助表示感谢。

Answer 1

你可以做这样的事情

$('#links li').click(function(e){
    var a = $(this).html();
    $('input').val(a);
    e.preventDefault();
});

示例： http://jsfiddle.net/jasongennaro/paPRg/7/

这会将link元素（HTML和all）放在输入中。

如果您只想要链接名称，请执行此操作

$('#links li a').click(function(e){
    var a = $(this).html();
    $('input').val(a);
    e.preventDefault();
});

示例2： http://jsfiddle.net/jasongennaro/paPRg/11/

修改

根据@ RobW的评论

OP希望存储链接，而不是HTML。

然后这样做

$('#links li a').click(function(e){ var a = $(this).attr('href'); $('input').val(a); e.preventDefault(); });

示例3： http://jsfiddle.net/jasongennaro/paPRg/12/

编辑2

以下是可用于检测自己链接的脚本。不知道如何使用.hoverCard函数。

$('#links li a').click(function(e){ var a = $(this).attr('href'); var b = $(this).text(); if(b == 'Own Link'){ $('input').focus(); //close hover with .hoverCard() } else{ $('input').val(a).focus(); } e.preventDefault(); });

示例4： http://jsfiddle.net/jasongennaro/paPRg/14/

Answer 2

您可以在函数中添加这样的处理程序（请参阅http://jsfiddle.net/7QTXU/）。这很大程度上取决于文档的结构，以找到要填写的相应表单字段，但如果您想要多个只有一个处理程序的表单，我认为您必须依赖于DOM结构来定位它们。如果您可以简化关系，那么这将有所帮助，例如，如果表单字段立即跟随预览，您可以使用next而不必遍历到父节点，然后找到该元素。 hovercard上可能有一种方法可以使用其API关闭它，但hide似乎有效并且不会干扰插件的操作。此外，检查取决于href的值，以查看哪一个应该关闭悬浮卡。如果它有一个可以使用的类而不是必须在href上匹配会更好。

$('.hc-details a').live('click', function() {
    var $this = $(this);
    if (!$this.attr('href').match(/^javascript/)) {
        $this.closest('p')
             .nextAll('form:first')
             .find('input:text')
             .val($this.attr('href'));
    }
    $this.closest('.hc-details').hide();
    return false;
});

Answer 3

更新了您的小提琴，在点击时将网址添加到输入中：

http://jsfiddle.net/GolezTrol/JuVxh/3/

它也设定了焦点，但我不知道如何很好地隐藏面板。我不知道这个hovercard功能。

将单击的链接添加到输入字段

3 个答案: