JQuery链接整个表格行以锚定触发fancybox

我找到了多种方法将整个表格行与jQuery链接到另一个页面。但是我尝试过的每个解决方案都不适用于指向触发fancybox的div的锚。JQuery链接整个表格行以锚定触发fancybox

我有以下的HTML

<tbody class="result" data-href="#details1"> 
    <tr> 
    <td rowspan="2" class="resultlogo"> 
    <img class="resultlogoimg" src="images/logos/logo-orshop.png"> 
    </td> 
    <td class="resulthead"> 
    <h1><a class="detaillink" href="#details1">Orshop</a></h1> 
    </td> 
    <td rowspan="2" class="resultprice"> 
    <h1>€ 69.00</h1></td><td rowspan="2" class="resultrating"> 
     <span class="markbg"><h1>8,3</h1></span> 
    </td> 
    </tr> 
    <tr> 
    <td class="resultpc"><h2>3074ES, Rotterdam</h2></td> 
    </tr> 
</tbody>

用下面的jQuery触发点击事件：

$(".result").click(function() { 
    window.document.location = $(this).data("href"); 
});

的<tbody>标签包装的，因为结果行奠定出路2级表中的行。我想基于用户点击一行（或tbody标签）在一个fancybox中显示div内容。

是不是可以使用数据href锚？

来源

2016-04-24 user3055582

一定要包裹你的'tbody' insi一个'table'元素，否则你的选择器'$（'。result'）'将是空的。 – DavidDomain

你可以到达锚点。 'window.location = $（'a [href]'，this）.attr（“href”）;' –

如果你要包住2点表中的行，设定您在<table>标签data属性，而不是在<tbody>标签。

然后你只需要像一个简单的fancybox初始化脚本：

$(".result").fancybox();

和使用的fancybox的特殊data属性设置href和内容的type像

<table class="result" data-fancybox-type="inline" data-fancybox-href="#details1">...</table>

见JSFIDDLE

来源

2016-04-27 04:24:16 JFK

JQuery链接整个表格行以锚定触发fancybox

回答

相关问题