-5

jQuery での $ の使用法を知っています。しかし、以下のコンテキストでの $ の動作を知りたいです。

        var Page = {
       
        init: function () {

            **Page.element = $("content");**
         }
        }

この参照は要素名のコンテンツに対するものだとおっしゃるかもしれません。しかし、いいえ！私は実際にここにDIVタグを持っています

id="コンテンツ"

そして、これはそれに対して完全にうまく機能します..

そして面白いことに、以下のように jquery への参照を追加しても機能しません。

<script type="text/javascript" charset="utf-8" src="js/jquery-1.4.2.js"></script>

私はjqueryのいくつかのバージョンで試しました

ここにページ上のJavaScript全体があります

  <script type="text/javascript" charset="utf-8">

  
    var Page = {

        init: function () {

            Page.element = $("content");
           
            Page.photo = $("body-photo");
            Page.points = $("body-points");
            Page.panel = $("content-2");
            
            Page.content = $("content-1");
            Page.contentCloseBtn = $$("#content-1 .close-btn")[0];

            Page.zoomOutBtn = $$("#content-2 .zoom-out-btn")[0];

                      
            Page.contentCloseBtn.addEventListener("click", bind(function () {
                var state = hasClass(Page.content, "open");
                if (state) removeClass(Page.content, "open")
                else addClass(Page.content, "open")
            }, Page), false);


            Page.attach();
            
        },

        attach: function () {
            Page.points.addEventListener("click", function () { Page.zoomIn.call(); alert('ccc'); }, false);
        },

        zoomIn: function () {
            Page.points.removeEventListener("click", Page.boundZoomIn, false);
            Page.photo.addEventListener("webkitTransitionEnd", Page.zoomInEnd, false);

            addClass(Page.element, "zoom-in");

        },

        zoomInEnd: function () {
            Page.photo.removeEventListener("webkitTransitionEnd", Page.zoomInEnd, false);
            Page.zoomOutBtn.addEventListener("click", Page.zoomOut, false);

            addClass(Page.element, "zoom-in-end");
            addClass(Page.panel, "expanded");
        },

        zoomOut: function () {
            Page.zoomOutBtn.removeEventListener("click", Page.zoomOut, false);

            removeClass(Page.panel, "expanded")
            removeClass(Page.element, "zoom-in-end");
            removeClass(Page.element, "zoom-in");
        }
    };
    
    window.addEventListener("DOMContentLoaded", bind(Page.init, Page), false);
    function startAnimation() {
        Page.init.call(Page);
    }
   
     startAnimation();

    
</script>

jquery cozへの参照で動作するようにしたいのですが、このファイルは、jquery参照を必要とする別のWebページにインポートされています

ここにHTMLがあります

<body class="slide-7">
<div id="content" >
    <header>
        <h1>xxxx</h1>
        <h2>xxxx.</h2>
    </header>
    
    <div id="body-photo">
        <img src="xxxx.jpg" style="height: 100%; width: 100%;" />
        <ul id="body-points" class="hotspot-list">
            <li class="hotspot-1"></li>
            <li class="hotspot-2">
                <div class="tooltip">
                   xxxx
                    <div class="tooltip-corner"></div>
                </div>                
            </li>
            <li class="hotspot-3"></li>
            <li class="hotspot-4"></li>
        </ul>        
    </div>


    <section id="content-1">
        <article>
            <header>xxxx.</header>       
            <p>xxxx.</p>
            <p>xxxx.</p>
        </article>
        <div class="close-btn"></div>
    </section>


    <section id="content-2">
        <article>
            <figure><img src="xxxx.jpg" alt="" /></figure>                
            <hgroup>
                <h1>xxxx</h1>
                <h2>xxxx.</h2>
            </hgroup>
            <div class="copy">
                xxxx            
            </div>

        </article>
        <div class="article-icons">
            <img class="active zoom-out-btn" src="xxxx.png" alt="" />
            <img src="xxxx.png" alt="" />
        </div>
        <!-- <div class="maximize-btn"></div> -->
    </section>


    


</div>
</body>

このシナリオに関連するリンクも歓迎します。ありがとう ：）

4

2 に答える 2