0

我在显示来自

标记到弹出窗口，我遇到引用错误，我可以参考 p 标记，直到我使用我的 .click 函数显示 p 标记，我只需要帮助在 click 函数之后获取显示的 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>
4

2 回答 2

1

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

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

里面$(this.parentNode).next('p').hover(function() { this已经是paragraph节点

演示

演示2

  $('.Article h1 a').click(function(event) {
    event.preventDefault();
    $(this.parentNode).next('p').fadeToggle(1000);
     $(this.parentNode).next('p').hover(function() { 
                         var paragraph  = $(this).text();
         if( !$('#pop-up').data("appended")){// THIS REMOVES multiple appending
            $('#pop-up').find('h3').append(paragraph);
             $('#pop-up').data("appended",true)
          }
            $('#pop-up').show();

                }, function() {
        $('#pop-up').hide();
     });
  });
于 2013-05-21T18:24:31.910 回答
1

看看这个 Fiddle是否不适合你。如果这是您想要的，我可以添加一些评论来证明我所做的更改是正确的。

简单来说：

  1. 我修复了 HTML。有一些标签没有关闭。
  2. 我将段落的附加部分移到了悬停之外，因此不再重复。
  3. 用来find代替next. 我必须承认我无法next上班，我也不知道为什么。
于 2013-05-21T19:16:45.043 回答