jQuery colorbox - 从单击的链接获取 url 参数

Question

我正在使用 Colorbox 在 iframe 中加载联系表单。

但是，我希望 Colorbox url 与 html url 不同，以便为 JS 和非 JS 用户提供不同的联系页面。

不过，我确实需要从确切单击的链接中获取 url 参数。

HTML 代码：

<a href="contact?id=XX" class="enquiryForm">

Colorbox 代码：

$(document).ready(function(){

$('.enquiryForm').colorbox({height:600, width:800, iframe:true, href: 'colorboxcontact?id=XX'});

});

其中“contact”是非 JS 页面，“colorboxcontact”是要在 Colorbox iframe 中加载的页面。

如何从 clicked 链接中提取 url 参数，然后将其添加到 jQuery 调用中的“colorboxcontact”href 值？

* 编辑*

好的，我已经到达以下位置，但仍然无法正常工作。谁能指出我哪里出错了？

$('.enquiryForm').colorbox({
    height:600, 
    width:800, 
    iframe:true, 
      href: $('.enquiryForm').each(function() {
        newhref = 'colorboxcontact' + $(this).attr('href').split("?")[3];
        $(this).attr('href', newhref);
    });
  });

Answer 1

要获取 url 字符串的特定查询字符串信息，您需要在以下位置找到此函数：

如何获取查询字符串JavaScript 中的值？

稍微修改一下：

function getParameterByName(url, name)
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec(url);
  if( results == null )
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

所以你最终会得到这样的结果：

$('.dialog-open').each(function() {
   $(this).colorbox({
     height: 600, 
     width: 800, 
     iframe: true, 
     href: "contact?id=" + getParameterByName($(this).attr("href"), "id")
   });
});

Answer 2

使用 .each() 获取值，如下所示：

$(document).ready(function(){
  $('.enquiryForm').each(function() {
    $(this).colorbox({
      height: 600, 
      width: 800, 
      iframe: true, 
      href: $(this).attr("href")
    });
  });
});

< a href="http://api.jquery.com/each/" rel="nofollow">.each() 使您可以访问每个 当您通过 this 循环它们时。如果您不关心它是否是完全限定的网址，可以将 $(this).attr("href") 替换为 this.href （IE 将完全限定这一点），如下所示：

$(function(){
  $('.enquiryForm').each(function() {
    $(this).colorbox({ height: 600, width: 800, iframe: true, href: this.href });
  });
});

Answer 3

我认为也许一个简单的方法是将 href 设置为返回链接的函数。

$(document).ready(function(){
    $('.enquiryForm').colorbox({
        height:600, 
        width:800, 
        iframe:true, 
        href: function(){
            return $(this).attr('href');
        }
    });
});