4

TLDR:見つけられないバグは、jQuery を介して HTML 要素が挿入されたときにプラグインが機能しないことです。

要約:プラグインは、HTML を制御できる場合に設計されていますが、そうでないため、マウスオーバーの「hoverzoom」属性を取得するためにイメージ タグをコロネーションしようとしていますが、必要な HTML 属性を jQuery 関数を使用して追加する.wrap(); .after();と、.addClass();、すべての画像が消えます。HTMLを直接制御できないため、jQuery DOM操作を介して行う必要があります。(質問しないでください、長い話ですが、jQuery でなければなりません)。奇妙なことに、同じサンプル環境 (以下を参照) で、HTML 要素、ID、およびクラスを追加すると、プラグインが機能します。しかし、必要なすべての属性をそのままのイメージ タグに追加しようとすると、タグが消えてしまいます。

理論:<ul>イメージ タグは、id="etalage"(プラグインの展開の指示に従って) がある場合と、<img>タグがそれぞれのクラスでソースおよびサム イメージとして指定されている場合の両方で消えるようです。私の理論では、CSS の "display:none" ルールが呼び出されているということですが、これが本当なら、ページで動作する他の例も動作しないのではないでしょうか?

プラグイン: Code Canyon の Etalage (リンクを投稿したいのですが、スタック オーバーフローは、私が若すぎて複数のリンクを投稿できないと言っています)

バグのサンプルページ: 野生(コメントはインスペクターで見ることができます)

私のコード（動作しません）、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

2 つの問題があります。

  1. hoverZoomjquery.etalage.min.js スクリプトでプラグインを適用するために ID を使用しています。つまり、同じ ID を持つ 2 番目の DOM 要素を挿入していることになります。ID は一意である必要があります。これを修正するには、クラス「etalage」を追加して ID を一意にし、$("#etalage") の代わりに $(".etalage") を使用しました。

  2. document.ready を使用してDOM操作を行い、プラグインを適用していますが、それらは異なるファイルです。どのハンドラーが最初に起動するかは保証されません。実際に DOM オブジェクトを挿入する前に、プラグインが適用される可能性があります。プラグインを適用する呼び出しを、DOM 操作を行うハンドラーに移動したので、要素を挿入した後に確実に呼び出されるようになりました。

「ハッキーな」修正で申し訳ありませんが、問題を説明する必要があります。これにより、コードが機能します。

<!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 に答える