Jquery 链接标签中的Fancybox链接

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

正如您所看到的，

标记中有一个

标记，发生的是fancybox将所有内部的

标记作为图像添加到fancybox的库中。所以，如果我点击一张图片，画廊里就有3张。 我能做些什么来保持这样的标签，但避免在一个图库中有相同的图像3次

---

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

根据W3C规范：

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

由于DTD将链接元素定义为空，因此链接元素可能是空的 也不能嵌套

---

因此，没有正确的方法来“修复”您的问题，除非遵守标准，并且不将锚定标记放在其他锚定标记中-这没有意义，也不会很好地发挥作用，正如您所发现的那样。您需要找出如何以不同的结构构建HTML，以符合所使用元素的标准

正如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>

自嵌套

）来包装嵌套的

注意我从嵌套链接中删除了
rel=“group”
属性，因为您不需要它们，除非您将它们用于fancybox以外的其他用途


编辑：由于您在包装器中有嵌套链接，因此您可能希望它们有一个单独的操作，而无需启动fancybox并在
悬停
上显示它们，正如您之前在其中一条注释中所述

首先，您可能需要像这样调整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，但仍然执行其默认操作

请参阅更新的
只需从内部
标记中删除
rel=“group”
，即可将其从gallery@JFK不幸的是没有任何区别，我猜他们从父tagOK继承了它，检查过了。你会选择什么样的html结构？（好奇）其他锚定标签中不允许使用锚定标签。你在自找麻烦。我知道“不改变dom结构”是你在回答问题时要求的一个约束，但那是不会发生的。您的DOM结构无效。@SvenB您可能需要将
a.fancybox:hover
更改为
。fancyboox:hover
<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();

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

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