从页面加载内容.通过一个类的href..在模态内

Question

尝试执行以下操作：我的页面有很多带有打开模态框（Colorbox）的div。这些链接打开的页面有一个id="mainColumn"。只需从此 id 加载内容。

我有这个：

<div>                       
<a href="includes/page_1.html" class="modal"></a>
</div>
<div>                       
<a href="includes/page_2.html" class="modal"></a>
</div>
<div>                       
<a href="includes/page_3.html" class="modal"></a>
</div>

 $(".modal").colorbox({
    width:900,
    href: $(".modal").attr('href') + " #mainColumn"
    });

效果很好...除了 的 href 变成了第一个......

所以includes/page_3.html 更改为 includes/page_1.html或者换句话说：所有模态框都显示相同的内容......

任何帮助将不胜感激，谢谢

Answer 1

使用 $(this) 获取当前（单击的）一个

$(".modal").colorbox({
    width:900,
    href: $(this).attr('href') + " #mainColumn"
});

Answer 2

$(".pop").each(function() {
  var el = $(this);
  el.colorbox({
    href: el.attr('href') + " #mainColumn"
  });
});

Answer 3

你可以

这样做：

$(".modal").colorbox({
    width:900,
    href: function(){ return $(this).attr('href') + " #mainColumn"; }
});

或者这个：

$(".modal").each(function(){
    $(this).colorbox({
        width:900,
        href: $(this).attr('href') + " #mainColumn"
    });
});