使用 jquery 循环插件为图像动态添加超链接以进行转换答案

【问题标题】：Adding hyperlink dynamically to images using jquery cycle plugin for transitions使用 jquery 循环插件为图像动态添加超链接以进行转换
【发布时间】：2012-10-01 07:09:18
【问题描述】：

我正在制作幻灯片，使用 jquery cycle plugin 进行转换。现在一切正常，直到我向图像添加超链接。如果用户希望添加，我正在尝试添加超链接，所以我在控制台中为每个图像都有一个设置按钮。如果用户选择一个超链接并单击设置，它应该设置。现在超链接设置正确，但是，过渡将应用于 anchor 标签而不是 img 标签。当我设置链接时，img 标签被包裹在这样的锚标签内。

     <a href="www.google.com" id="link" class="link"> 
        <img id="imgBoxRot_1_1" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: none; z-index: 3; opacity: 0;" src="http://localhost/images/layout/slideShow/gallImg1.jpg">
     </a>

我像这样动态创建这个锚标记，并将其附加到图像中。

    var newA = document.createElement("a");
    newA.setAttribute("id","lnkImgRotImg_"+iCount+"_"+idT);
    newA.setAttribute("href",document.getElementById(lnk).value);
    newA.setAttribute("class","aTransLink");
    newA.setAttribute("target","_blank");

在设置锚标记之前，插件可以正常工作并应用过渡，但是在向图像添加锚之后，过渡将应用于锚标记而不是图像。我该如何解决这个问题？
谢谢你的时间。

【问题讨论】：

标签： php jquery css jquery-plugins jquery-cycle

【解决方案1】：

在研究了插件文档后，我了解到，该插件默认应用于 第一个标签，它位于所应用的 div 内。
也就是说，如果我们有

<div class="">
     <img></img>
     <img></img>         
</div>

现在，如果我像这样在图像周围包裹一个锚，

<div class="">
     <a href="">
       <img></img>
     </a>

     <img></img>         
</div>

插件混淆了图像标签和锚标签，并将过渡应用于锚而不是图像标签（因为它是应用循环插件的div之后的第一个）。因此，我最初将所有图像都包装在一个锚标记中（之前我动态添加了锚）并将插件应用于锚本身而不是图像标签。

【讨论】：