Question

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

我有以下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触发click事件：

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

<tbody>标记包含2个表行，因为结果行的布局方式。我想根据用户点击一行（或tbody标签）在fancybox中显示div内容。

是否无法将数据-href与锚点一起使用？

Answer 1

如果要打包2个表行，请在data标记中设置<table>个属性，而不是<tbody>标记。

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

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

并使用fancybox的特殊data属性来设置href和type内容，例如

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

参见 JSFIDDLE

JQuery将整个表行链接到锚点以触发fancybox

1 个答案: