jquery - 如何在悬停事件中将内容从一个元素附加到另一个元素

Question

所以我有四个标题链接，我想从中获取属性值并附加到外部的空 div。

这是jsFiddle

我遇到问题的部分是javascript

$('li a.link').hover(
    function(){
        $(this).text().appendTo('.container');
    });

我不在乎我是抓住属性值还是里面的文本，但似乎都不起作用。我已经让空 div 说“Hello World！” 当我将鼠标悬停在链接上时，但我无法获取标题值或 HTML 中的文本，感谢您提供任何帮助。

Answer 1

我假设如果这是一个悬停，即使你也希望文本在“Li a”的鼠标离开时消失，所以我为你做了一个 jsFiddle 示例来做这两个。请检查一下，如果有任何问题，请随时提出。

$(document).on('mouseenter','li a',function(){
    $('.container').text($(this).attr('title'));
}).on('mouseleave','li a', function(){
    $('.container').text('');
});

http://jsfiddle.net/danieljordan13/JfGhY/11/

Answer 2

$('li a.link').hover(function(){
        var title = $(this).attr('title');
        $('.container').append(title);
});

小提琴

Answer 3

我建议，如果你想附加文本：

$('li a').hover(
    function(){
        var text = $(this).text();
        $('.container').text(function(i,t){
            return t + ' ' + text;
        });
    });

JS 小提琴演示。

或者，如果要替换文本：

$('li a').hover(
    function(){
        var text = $(this).text();
        $('.container').text(text);
    });

JS 小提琴演示。

重新阅读了这个问题，并看到你想使用这些title属性，我建议改为：

$('li a').hover(
    function(){
        var title = this.title;
        $('.container').text(title);
    });

JS 小提琴演示。

参考：

• text().

Answer 4

我更喜欢使用append()之前appendTo()

这有效：

$('.container').append($(this).text());

见http://jsfiddle.net/JfGhY/5/

要附加标题：

$('.container').append($(this).attr('title'));

http://jsfiddle.net/JfGhY/10/