Блог

Я здесь над головой, но я изучаю javascript и хотел добавить классную функцию на веб-сайт, который я создаю для дня рождения моей жены, а также продвинуть себя дальше в язык.

Я вытащил код из руководства по веб-сайту, и там код работает просто отлично. HTML и CSS на моем сайте идеальны, но javascript не соответствует. У меня есть JS-код для другой функции, и он работает просто отлично, но код из руководства не работает, и мне было интересно, связано ли это с тем, что два отдельных JS-кода конкурируют друг с другом или неправильно написаны вместе в JS-файле.

Есть hammer.js файлы, о которых я, по общему признанию, знаю очень мало.

Как я уже сказал, это для дня рождения моей жены, и я просто хотел добавить эту функцию, одновременно углубляя меня в javascript.

Заранее спасибо за любую информацию.

Вот файл JS с двумя отдельными функциями:

 $(".question").click(function() {
    $(this).next().fadeToggle("fast");
    $(this).children();
});




$(function() {

    var $wrapper= $( '#fc-wrapper' ),
        $handle = $wrapper.children( 'div.fc-handle-pull' );

    $handle.on( 'click', function( event ) {

        ( $handle.data( 'opened' ) ) ? close() : open();

    } );

    $wrapper.hammer().bind( 'dragend', function( event ) {
        switch( event.direction ) {
            case 'right'    : open(); break;
            case 'left'     : close(); break;
        }
    });

    function open() {
        $wrapper.addClass( 'fc-wrapper-open' );
        $handle.data( 'opened', true );
    }

    function close() {
        $wrapper.removeClass( 'fc-wrapper-open' );
        $handle.data( 'opened', false );
    }

});
  

Вот как это связано в html-файле. Я просто размещаю ссылки на скрипты, поскольку все остальное, похоже, работает нормально. Как указано выше, все коды взяты из учебника, который работает так, как должен, просто вопрос не в самом коде, а в том, как он размещен в файлах или как он связан, или если отсутствуют какие-либо ссылки. :

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script type="text/javascript" src="hammer.js"></script>
        <script type="text/javascript" src="jquery.hammer.js"></script>
       <script type="text/javascript" src="index.js"></script>


    </body>
</html>
  

HTML:

 <div class="fc-wrapper">

    <!-- right-most handle piece -->
    <div class="fc-handle fc-handle-pull"></div>

    <div class="fc-perspective">

        <!-- right part overlay; get's darker -->
        <div class="fc-overlay fc-overlay-reverse"></div>

        <!-- middle handle piece -->
        <div class="fc-handle fc-handle-out"><div></div></div>

        <!-- inner bottom content part -->
        <div class="fc-bottom">
            <div class="fc-bottom-bg">
                <div class="fc-content">
                    <p>I can live with doubt, and uncertainty, and not knowing. I think it's much more interesting to live not knowing than to have answers which might be wrong. <span>Richard Feynman</span></p>
                </div>
            </div>
            <div class="fc-overlay fc-overlay-solid"></div>
        </div><!-- //fc-bottom -->

        <!-- front and back of the flipping half -->
        <div class="fc-flip">

            <div class="fc-front">

                <div class="fc-inner">

                    <div class="fc-overlay fc-overlay-left"></div>
                    <!-- left-most part of handle -->
                    <div class="fc-handle fc-handle-in"><div></div></div>

                    <div class="fc-content">
                        <h3>Dubai</h3>

                    </div>

                </div>

            </div><!-- //fc-front -->

            <div class="fc-back">

                <div class="fc-inner">

                    <div class="fc-content">
                        <div class="feynman">
                            <span>1918 – 1988</span>
                        </div>
                    </div>

                    <div class="fc-overlay fc-overlay-right"></div>

                </div>

            </div><!-- //fc-back -->                 

        </div><!-- //fc-flip -->                 

    </div><!-- //fc-perspective -->

</div><!-- //fc-wrapper -->
  

jquery.hammer.js файл:

 /*
 * Hammer.JS jQuery plugin
 * version 0.3
 * author: Eight Media
 * https://github.com/EightMedia/hammer.js
 */
jQuery.fn.hammer = function(options)
{
    return this.each(function()
    {
        var hammer = new Hammer(this, options);

        var $el = jQuery(this);
        $el.data("hammer", hammer);

        var events = ['hold','tap','doubletap','transformstart','transform','transformend','dragstart','drag','dragend','swipe','release'];

        for(var e=0; e<events.length; e  ) {
            hammer['on'  events[e]] = (function(el, eventName) {
                return function(ev) {
                    el.trigger(jQuery.Event(eventName, ev));
                };
            })($el, events[e]);
        }
    });
};
  

Можете ли вы попробовать переместить следующий код в $(function

 $(".question").click(function() {
    $(this).next().fadeToggle("fast");
    $(this).children();
});
  

вы пытались переместить объявление javascript в HTML из jquery.hammer.js до того, как hammer.js ?

Удалите $ из начала вашего IIFE (выражение функции, вызываемое немедленно) и добавьте открывающие и закрывающие скобки в конце.

 (function() {

    var $wrapper= $( '#fc-wrapper' ),
        $handle = $wrapper.children( 'div.fc-handle-pull' );

    $handle.on( 'click', function( event ) {

        ( $handle.data( 'opened' ) ) ? close() : open();

    } );

    $wrapper.hammer().bind( 'dragend', function( event ) {
        switch( event.direction ) {
            case 'right'    : open(); break;
            case 'left'     : close(); break;
        }
    });

    function open() {
        $wrapper.addClass( 'fc-wrapper-open' );
        $handle.data( 'opened', true );
    }

    function close() {
        $wrapper.removeClass( 'fc-wrapper-open' );
        $handle.data( 'opened', false );
    }

})();