javascript - Popup.js 不工作

Question

我的 HTML 是这样的

<div class="container">
          <p>MANHATTAN ...<a href="#" class="poper">Read More</a></p>
          <p class="popup" style="display:none" >some text</p>
  </div>
 <div class="container">
          <p>washington...<a href="#" class="poper">Read More</a></p>
          <p class="popup" style="display:none" >some text 2</p>
  </div>

我正在使用Popup.js像这样制作一个弹出窗口

 <script type="text/javascript" xmlns:exslt="http://exslt.org/common">
        $(function(){
        $('.poper').popup({
             content : $(this).parents('.container').find(".popup")
           });
    });
 </script>

但是它不起作用。谁能指出我做错了什么？

注意:已添加对 Jquery 和 Popup JS 的引用。这里没有显示

JSFiddle

Answer 1

这就是你应该说的:

$('.poper').popup({
    content : function(e){
        return $(this.ele).closest('.container').find(".popup").text()
    }
});

问题出在选择器中“this”关键字的值

$(this).parents('.container').find(".popup")

由于 Popup.js 插件的工作原理，当用户单击链接时，“this”的值是 Popup 对象，而不是单击的链接。例如，如果您将 console.log 行添加到 fiddle

content : function(){
    console.log(this);
    $(this).parents('.container').find(".popup")
}

然后单击链接，Popup 会记录在控制台中，而不是链接元素中。因为“this”不是您期望的点击链接，所以您的 JS 找不到 .popup 元素。

Popup.js 将弹出触发元素的引用保留为 this.ele。因此，按照提到的方式更改您的 init 函数，它就会起作用。

<小时/>

有关 POPUP.JS 的更多详细信息

插件文档并没有告诉您应有的信息，因此，如果其他人会发现它们有用，这里有一些更多详细信息:

在其更基本的形式中，该插件会请求链接的 href 属性中的任何内容并将其显示在弹出窗口中。

在弹出页面中使用此示例

<a href="http://placehold.it/350x150.png" class="popup">Image 1</a>

占位符图像在弹出窗口中打开。

同样，这个例子

<a href="http://toddish.co.uk" class="default_popup">Default External Site</a>

向http://toddish.co.uk提出请求并将结果加载到弹出窗口中。

但是当您为 Popup.js 提供带有 href 属性的链接时 # 您需要以另一种方式提供内容。

在这种情况下，您可以在“content”选项中传递 popup() 初始化中的内容。例如，您可以创建一个匿名函数，该函数将字符串返回到“content”。这有效:

$('.popupContent').popup({
    content : function(){
        return 'Hello World';
    }
});

如果添加类型选项来设置内容类型，您还可以将所需的内容指定为字符串:

$('.html_popup').popup({
  content : '<h1>This is some HTML</h1>',
  type : 'html'
});

或者，您也可以将内容隐藏在隐藏元素中，为其指定唯一 ID，并在弹出链接的 href 属性中使用该 ID，例如:

<p id="popText" style="display:none">some text</p>

和链接

<a href="#popText" class="poper">Link text</a>

和

$('.poper').popup();

Popup.js 将获取隐藏元素的内容，并在用户单击时将其显示在弹出窗口中。

看起来是一个不错的脚本，开发人员只是没有解释一切!