Question

鉴于以下结构：

<table class="myTable">

    <tr>
        <td class="block.productgrid.quickview.cell">
            <a class="myLink">My Link</a>
        </td>
    </tr>


    <tr>
        <td>
            <div class="contentsForColorbox">
                Some contents
            </div>
        </td>
    </tr>

</table>

...我在这里有几个表'myTable'，如何配对点击'myLink'并在彩盒中显示'contentsForColorbox'？

我认为我很接近，但我错过了一些东西：

$( '.myLink', this).click( function(){
    $.colorbox({
        inline : true,
        'href': $( '.contentsForColorbox') ,
        'width': 500,
        'height': 350
    });
});

...截至目前，如果我有5个表'contentsForColorbox'将显示在colorbox中。叹了口气，一天太久了： - （

Answer 1

问题是使用的选择器 - $( '.contentsForColorbox')，它使用给定的类定位所有元素，而不是需要找到相对于所点击链接的目标

$( '.myLink', this).click( function(){
    $.colorbox({
        inline : true,
        'href': $(this).closest('table').find('.contentsForColorbox') ,
        'width': 500,
        'height': 350
    });
});

演示：Fiddle

colorbox - 模态的链接和内容列表

1 个答案: