Javascript 如何在模式启动时初始化js_Javascript

Javascript 如何在模式启动时初始化js

javascript

Javascript 如何在模式启动时初始化js,javascript,Javascript,我基本上有一个模式，其中我需要使用一些js，该模式是通过使用一些vue.js代码来启动的，内部模式内容使用一些常规js 首先将这两个部分分开很好，通过将我的附加逻辑js与vue.js一起放入，我得到了以下错误：我尝试分离文件并打开窗口。（加载/准备就绪）到处都是运气不佳 Uncaught ReferenceError: item1 is not defined at projects-modal.js:25 at dispatch (jquery-3.3.1.min.js:2

我基本上有一个模式，其中我需要使用一些js，该模式是通过使用一些vue.js代码来启动的，内部模式内容使用一些常规js

首先将这两个部分分开很好，通过将我的附加逻辑js与vue.js一起放入，我得到了以下错误：

我尝试分离文件并打开

窗口。（加载/准备就绪）

到处都是运气不佳

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>

我认为问题在于，当您加载页面时，由于您的代码在头部，所以它在DOM准备就绪之前执行。这纯粹是我的推测，但由于JS fiddle是一个已经加载的网站，DOM可能已经准备好接受命令

因此，不要使用on（“load”）而是使用on（“ready”）/.ready（）。这将等待DOM初始化，然后您可以调用该函数。我再次对此不确定，但请尝试并让我知道进展情况。

您的错误是什么？控制台在小提琴中清晰可见。此外，如果你能简化你的操作，你可能会得到更快的响应——去掉与你看到的错误无关的任何东西都会帮助其他人（并且可能会帮助你首先解开谜团！）我添加了“ready”（准备就绪），是的，它消除了错误，但同时还有逻辑我相信

$（窗口）。on（'load'）

（假设这是jQuery）实际上比

.ready

晚运行，但不要引用我的话。尝试将OnLoad语句移动到身体而不是头部，只是为了test@Cornelis我不确定你将其移动到Body是什么意思我发现加载vue.js并准备好逻辑后，我会丢失错误，但也会丢失逻辑功能，这是不是像js中的分步断点有点像C#？

$(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;
      }
    });
});