链接标记中的Fancybox链接

Question

在我的网站上，用户可以收藏图像（用户将鼠标悬停在图像上，选择喜欢的图像显示）。 我当前的代码（在foreach循环中）：

    <a class="fancybox" title="Titel {{ $afbeelding }}" rel="group" href="{{asset('assets/images/badkamer/full').'/'.$afbeelding->url}}" >
        <div class="favorieten-hover-box">
            <img src="{{asset('assets/images/badkamer/thumb').'/'.$afbeelding->url}}">  
            <div>
                <span>                               
                    <a rel="group" href="<?php if (!Auth::check()){echo URL::to('login');} else{ echo "javascript:void(0);";}?>"><i class="fa fa-lg fa-heart-o favoriet-knop" title="Toevoegen aan favorieten" id="{{$afbeelding->id}}"></i></a>
                    <a rel="group" href="{{URL::to('badkamer/'.$afbeelding->kamer->id.'/'.str_replace(' ','-',$afbeelding->kamer->naam))}}"><i class="fa fa-caret-square-o-right  fa-lg" title="Badkamer bekijken"></i></a> 
                </span>
            </div>
        </div>
    </a>

如您所见， <a>标签中有<a>标签，会发生什么是fancybox将所有内部<a>标签作为图像添加到fancybox的图库中。 因此，如果我点击图片，其中有3个在图库中。 我可以做些什么来保持这样的标签，但避免在一个图库中使用相同的图像3次。

编辑 ：a标签完美地工作，他们链接到正确的操作，唯一的问题是所有图像在fancybox库中出现3次。

Answer 1

由于嵌套<a>另一个标签内<a>标签导致了一个几乎不可能完成的解决方案，作为一种解决方法，你可以用另一种元素（所建议MauricioCarnieletto ）来包装你嵌套<a>标签。

然后使用特殊的fancybox的data属性将该包装器（ class="fancybox" ）元素绑定到fancybox BUT：

• data-fancybox-href
• data-fancybox-title
• data-fancybox-group

喜欢 ：

<div class="fancybox" data-fancybox-title="Titel {{ $afbeelding }}" data-fancybox-group="group" data-fancybox-href="{{asset('assets/images/badkamer/full').'/'.$afbeelding->url}}" >
    <div class="favorieten-hover-box">
        <img src="{{asset('assets/images/badkamer/thumb').'/'.$afbeelding->url}}" alt="" />  
        <div>
            <span>                               
                <a href="<?php if (!Auth::check()){echo URL::to('login');} else{ echo "javascript:void(0);";}?>"><i class="fa fa-lg fa-heart-o favoriet-knop" title="Toevoegen aan favorieten" id="{{$afbeelding->id}}"></i></a>
                <a href="{{URL::to('badkamer/'.$afbeelding->kamer->id.'/'.str_replace(' ','-',$afbeelding->kamer->naam))}}"><i class="fa fa-caret-square-o-right  fa-lg" title="Badkamer bekijken"></i></a> 
            </span>
        </div>
    </div>
</div>

然后你的脚本可以像下面这样简单：

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

请参阅JSFIDDLE

注意我从嵌套链接中删除了rel="group"属性，因为除非你将它们用于除fancybox之外的其他目的，否则它们不需要它们。

---

编辑 ：因为您在包装器中有嵌套链接，您可能希望它们具有单独的操作而不会触发fancybox，并且如您之前在一条评论中所述那样在hover显示它们

首先你可能需要调整你的CSS

.fancybox:hover .fa {
    display: block;
    /* other css properties */
}

注意我的目标是.fa ，这对于两个嵌套链接都是通用的。

然后调整你的fancybox初始化代码

$(".fancybox").on("click", ".fa", function (e) {
    e.stopPropagation(); // don't fire fancybox
}).fancybox();

注意我们使用.stopPropagation()来阻止选择器.fa从触发fancybox但仍然执行其默认操作。

请参阅更新的JSFIDDLE

Answer 2

根据W3C规范： 嵌套链接是非法的 。

由A元素定义的链接和锚点不得嵌套; A元素不得包含任何其他A元素。

由于DTD将LINK元素定义为空，因此LINK元素也可以不嵌套。

因此，没有正确的方法可以“修复”你的问题而不遵守标准而不将锚标签放在其他锚标签中 - 这没有意义，也不会像你发现的那样发挥得很好。 您需要弄清楚如何以不同方式构建HTML以符合您正在使用的元素的标准。

Answer 3

像sphanley所说，你不能嵌套两个链接，但是，你可以用js解决这个问题，并改变元素。

将您的HTML更改为此冷杉：

<span class="callthisanewclass" title="Titel {{ $afbeelding }}" rel="group" data-href="{{asset('assets/images/badkamer/full').'/'.$afbeelding->url}}" >
        <div class="favorieten-hover-box">
            <img src="{{asset('assets/images/badkamer/thumb').'/'.$afbeelding->url}}">  
            <div>
                <span>                               
                    <a rel="group" href="<?php if (!Auth::check()){echo URL::to('login');} else{ echo "javascript:void(0);";}?>"><i class="fa fa-lg fa-heart-o favoriet-knop" title="Toevoegen aan favorieten" id="{{$afbeelding->id}}"></i></a>
                    <a rel="group" href="{{URL::to('badkamer/'.$afbeelding->kamer->id.'/'.str_replace(' ','-',$afbeelding->kamer->naam))}}"><i class="fa fa-caret-square-o-right  fa-lg" title="Badkamer bekijken"></i></a> 
                </span>
            </div>
        </div>
    </span>

然后，将它添加到您的JS（在本例中为Jquery）

$('.callthisanewclass').on('click', function () {

    var ths = $(this),
        href = ths.data('href');

    ths.fancybox({

       href: href

    });

}