將點擊的鏈接添加到輸入字段

Question

我在這里創建了一個小提琴：

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

基本上，我想允許用戶將鼠標懸停在鏈接上，出現面板，他們可以單擊該面板上的鏈接，該鏈接被添加到輸入字段中。

此外，我確實需要使LINKS動態化。

想知道是否有人知道：

1. onclick鏈接URL放置在文本字段中。
2. 如果他們單擊OWN LINK，它將關閉面板並聚焦在輸入字段中。
3. 如何使它動態化，所以如果我們想在一頁上包含兩個或更多這些..我將如何使腳本動態化，所以這並不意味着需要大量重復的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/

這會將鏈接元素（HTML和全部）放置在輸入中。

如果您只想要鏈接名稱，請執行此操作

$('#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

更新了小提琴，將URL添加到單擊時的輸入中：

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

它也設置了焦點，但是我不知道如何很好地隱藏面板。 我不知道這個懸浮卡功能。