jquery - 将数据消息传递给 div

Question

我正在尝试将数据消息传递给 div，这是当前设置：

html

<a data-message="my message" href="www.site.com">Click here</a>

<div class="new-window" style="display: none;">
    <p>(message should be here)</p>
</div>

js

$('a[data-message]').click(function(){
    $('.new-window').fadeIn(300).text($('.new-window p').data('message'));
    return false;
});

Answer 1

$('.new-window p').data('message')因为这将没有 data-* 属性。所以它不返回任何东西。

像这样改变

   $('a[data-message]').click(function(){
    var values=$(this).data('message');
    $('.new-window p').text(values);
    $('.new-window').fadeIn(300);
    return false;
});

Answer 2

调用淡入后替换为 .text($(this).attr('data-message')); 或 .text($(this).data('message'));

您想从锚的属性中提取值，而不是目标 div。

Answer 3

这是您需要做的：

html

<a data-message="my message" href="www.site.com">Click here</a>

<div class="new-window" style="display: none;">
    <p>(message should be here)</p>
</div>

js

$('a[data-message]').click(function(){
    $('.new-window').fadeIn(300).text($('a[data-message]').data('message'));
    return false;
});

进一步解释：您指的是 .new-window p 中的数据消息，它不存在的地方。

Answer 4

采用

$('a[data-message]').click(function(){

    var message = $(this).data('message');
    $('.new-window').fadeIn(300)
                    .find('p')
                    .text( message );

    return false;
});

演示在http://jsfiddle.net/gaby/cMkKY/