4

TLDR：我找不到的一个错误是当通过 jQuery 注入 HTML 元素时阻止插件工作。

摘要：如果您可以控制 HTML，则设计该插件，但是由于我没有，因此我试图加冕图像标签以获得 mouseover “hoverzoom” 属性，但是当我通过 jQuery 函数添加必要的 HTML 属性时，例如.wrap(); .after();和.addClass();，所有图像消失。我必须通过 jQuery DOM 操作来完成，因为我无法直接控制 HTML。（别问，长话短说，一定是jQuery）。奇怪的是，在同一个示例环境中（见下文），如果我添加 HTML 元素、ID 和类，插件就可以工作。但是，如果我尝试将所有必要的属性添加到裸图像标签，它就会消失。

理论：当<ul>有一个id="etalage"（如插件部署方向指示）以及当<img>标签有各自的类将它们指定为源图像和拇指图像时，图像标签似乎都会消失。我的理论是调用了一些 CSS“显示：无”规则，但如果这是真的，那么在页面上工作的另一个例子不应该也不起作用吗？

插件：代码峡谷上的 Etalage（我会发布链接，但 Stack Overflow 告诉我我太初级，无法发布多个链接）

错误的示例页面： 在野外（评论可以在inspector中看到）

我的代码（不起作用），HTML：

<img id="thumbImage" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt="" />

jQuery：

$(document).ready(function(){ 
$('#thumbImage').wrap('<ul id="etalage"><li /></ul>')
.addClass('etalage_thumb_image')
.after('<img class="etalage_source_image target" />'); $('.etalage_source_image')
.attr('src', 'http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg'); 
});

根据 Etalage 的说法，这是行之有效的代码。

HTML

<ul id="etalage">
<li>
<img class="etalage_thumb_image" src="xyz.jpg">
<img class="etalage_source_image target" src="xyz.jpg">
</li>
</ul>

我迷路了。如果有人可以提供帮助，我会提前感谢。我确实在他们的帮助论坛上发过帖子，但是 SO 在过去调试我的代码方面非常有帮助。

4

1 回答 1

1

有两个问题。

  1. 您正在使用 id 在 hoverZoomjquery.etalage.min.js 脚本中应用插件。这意味着您正在注入具有相同 id 的第二个 DOM 元素。ID应该是唯一的。我通过添加一个类“etalage”并使用 $(".etalage") 而不是 $("#etalage") 使 ids 唯一来解决这个问题。

  2. 您正在使用 document.ready 进行 DOM 操作以及应用插件，但它们是不同的文件。无法保证哪个处理程序将首先触发。该插件可以在您实际注入 DOM 对象之前应用。我将调用以将插件应用到执行 DOM 操作的处理程序，以便确保在注入元素后调用它。

我为“hacky”修复道歉，但它应该说明问题。这使得代码工作。

<!DOCTYPE html>
<html>
<head>
    <title>iG Hoverzoom v1</title>


    <link rel="stylesheet" type="text/css" href="http://igavelauctions.com/wp-content/themes/twentyeleven/css/hoverZoomEtalage.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script type="text/javascript" src="http://igavelauctions.com/wp-content/themes/twentyeleven/js/hoverZoomjquery.etalage.min.js"></script>

    <!--<script type="text/javascript" src="hoverZoomThumbWidths.js"></script>-->

    <script type="text/javascript">
        $(document).ready(function () {


            $('#thumbImage').wrap('<ul id="etalage2" class="etalage"><li></li></ul>').addClass('etalage_thumb_image').after('<img class="etalage_source_image target"/>');

            $('.etalage_source_image').attr('src', 'http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg');

            $('.etalage').etalage({
                thumb_image_width: 300,
                thumb_image_height: 400,
                source_image_width: 900,
                source_image_height: 1200
            });


        });
    </script>


</head>
<body>


    <div>
        <!-- Example of code that works -->

        <ul id="etalage1" class="etalage">
            <li>
                <img class="etalage_thumb_image" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg">
                <img class="etalage_source_image target" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg">
            </li>
        </ul>


    </div>

    <div>


        <!-- This is image tag that I'm trying to turn into Etalage through jQuery operators It disappears when the page is rendered. -->
        <img id="thumbImage" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt="" />
    </div>


</body>


</html>
于 2013-09-20T22:06:27.607 回答