Question

我在显示

标签中的文本到弹出窗口时出现问题，我遇到了参考错误，我可以参考p标签，直到我使用我的.click函数显示p标签，我只需要在点击功能之后获取显示的p标签的帮助，并将其输出到我的悬停弹出功能这里是我的代码。

    $('.Article h1 a').click(function(event) {
    event.preventDefault();
    $(this.parentNode).next('p').fadeToggle(1000);
     $(this.parentNode).next('p').hover(function() { 
                         var paragraph  = $(this).next('p').text();
            $('#pop-up').find('h3').append(paragraph);
            $('#pop-up').show();
                }, function() {
        $('#pop-up').hide();
     });
  });

以下是HTML代码：

    <div id="content">
    <div class="column">
    <div class="Article">
    <img src="images/SteveJobs.png" alt="Steve Jobs" Title="SteveJobs" />
    <h1><a href="#"> Computers changed Forever</a></h1>
    <p> The Brilliant Mind of Steve Jobs. </p>
     <a href="#" id="trigger">this link</a>

                <!-- HIDDEN / POP-UP DIV -->
                 <div id="pop-up">
                  <h3>Pop-up div Successfully Displayed</h3>

                 </div>
    </div>

Answer 1

问题出在var paragraph = $(this).next('p').text();

我想你想要var paragraph = $(this).text();

<{1}} $(this.parentNode).next('p').hover(function() {内的

已经是this个节点

<强> DEMO

<强> DEMO2

paragraph

Answer 2

查看this Fiddle是否对您不起作用。如果这是您想要的，我可以添加一些注释来证明我所做的更改。

简而言之：

我修复了HTML。有些标签没有关闭。
我将段落的附加移动到悬停之外，所以不再重复。
使用find代替next。我必须承认我无法让next工作，我还没弄明白为什么。

无法在弹出窗口中显示段落预览

2 个答案: