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行添加到您的小提琴

content : function(){
    console.log(this);
    $(this).parents('.container').find(".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发出请求并在弹出窗口中加载结果。

但是当您使用href属性＃给Popup.js链接时，您需要以另一种方式为其提供内容。

在这种情况下，您可以在“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将获取隐藏元素的内容，并在用户单击时将其显示在弹出窗口中。

看起来像一个不错的脚本，开发人员只是没有解释所有内容！

Popup.js无效

1 个答案: