Question

我基本上有一个模态，我需要使用一些js，模态通过使用一些vue.js代码，内部模态内容使用一些常规的js。

首先将这两个分开工作正常，只需将我的附加逻辑-js与vue.js一起投入，我就会遇到这些错误：

我尝试将文件分开并在此处设置window on.(load/ready)以便运气

Uncaught ReferenceError: item1 is not defined
    at projects-modal.js:25
    at dispatch (jquery-3.3.1.min.js:2)
    at y.handle (jquery-3.3.1.min.js:2)

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Projects</title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <!-- jquery -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <!-- vuejs -->
        <script type="text/javascript" src="js/projects-modal.js"></script> <!-- custom js -->
    </head>
    <body>
        <h1>-projects-</h1>

        <ul id="button-container">
            <li>
                <a id="html-modal-button" @click="showModal = 'html-modal'">
                    <img class="htmllogo" src="images/HTMLLogo.png">
                    <div class="html-text-block">
                        <h2>HTML</h2>
                        <p>My web projects</p>
                    </div>
                </a>
            <htmlmodal v-if="showModal === 'html-modal'" @close="showModal = false"></htmlmodal>
        </li>
    </ul>


    <!-- MODAL SECTION -->
    <script type="text/x-template" id="html-modal-template">
    <transition name="modal">
            <div class="modal-mask">
                <div class="modal-wrapper">
                    <div class="modal-container">
                        <slot name="body">
                            <div id="wrapper">
                                <div id="project-list">
                                    <ul>
                                        <li id="item1">item1</li>
                                        <li id="item2">item2</li>
                                    </ul>
                                </div>
                                 <div id="image-container">
                                <div id="image-area">
                                  <img src="https://semantic-ui.com/images/wireframe/image.png">
                                </div>
                                <div id="description-area">
                                    just a placeholder text for when nothing has been chosen.
                                </div>
                              </div>
                              <button class="fas fa-angle-up modal-default-button" @click="$emit('close')"></button>
                            </div>
                        </slot>
                    </div>
                </div>
            </div>
    </transition>
    </script>
</body>
</html>

JS：

$(window).on('load', function(){
// CREATE THE DOM COMPONENT
Vue.component('htmlmodal', {
    template: '#html-modal-template',
    });

    Vue.component('csmodal', {
        template: '#cs-modal-template',
    });


    // START THE APP
    new Vue({
        el:'#button-container',
        data: {
            showModal: false
        }
    });

    const desc_area = document.getElementById('description-area');
    const image = document.querySelector('img');
    const map = new Map();

    // register item element as a key and object with corresponding description / image as value
    map.set(item1, { desc: 'test1', img: 'https://i.ytimg.com/vi/tHGIZ4rLbOY/hqdefault.jpg' });
    map.set(item2, { desc: 'this is a test2', img: 'https://i.pinimg.com/originals/cf/2e/d2/cf2ed20d5a0f941dc64b2aa388bfa884.png' });

    // you can bind on click handler for example
    const list = document.querySelector('ol');
    list.addEventListener('click', event => {
      // if element that was registered in our map triggered the event
      if (map.has(event.target)) {
        // change text of description area
        desc_area.textContent = map.get(event.target).desc;
        // change src of the image
        image.src = map.get(event.target).img;
      }
    });
});

Answer 1

我认为问题在于，当您加载页面时，由于您的代码位于头部，因此在DOM准备好之前就会执行。这纯粹是我推测的，但由于JS小提琴是一个已经加载的网站，DOM可能已经准备好了命令。

因此，不要使用on（“load”）来执行（“ready”）/ .ready（）。这将等待DOM初始化然后您可以调用该函数。我再也不确定这一点，但请好好告诉我它是怎么回事。

如何在模态启动时初始化js

1 个答案: