Question

介绍性说明：在Drupal 8中，我们将自定义javaScript代码放在名为：main.js

的文件中

最初我在该文件中放置了以下脚本（在网站的首页上生成了一个Tab），并且它运行良好：

function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("js--bottons-ecards");
for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
}
document.getElementById(pageName).style.display = "block";
}
document.getElementById("defaultOpen").click();

后期我在同一个文件中添加了另一个脚本，以便在网站的另一个页面上的视频上生成按钮：

var videoPlayButton,
videoWrapper = document.getElementsByClassName('video-wrapper')[0],
video = document.getElementsByTagName('video')[0],
videoMethods = {
    renderVideoPlayButton: function() {
        if (videoWrapper.contains(video)) {
            this.formatVideoPlayButton()
            video.classList.add('has-media-controls-hidden')
            videoPlayButton = document.getElementsByClassName('video-overlay-play-button')[0]
            videoPlayButton.addEventListener('click', this.hideVideoPlayButton)
        }
    },
    formatVideoPlayButton: function() {
        videoWrapper.insertAdjacentHTML('beforeend', '\
            <svg class="video-overlay-play-button" viewBox="0 0 200 200" alt="Play video">\
                <circle cx="100" cy="100" r="90" fill="none" stroke-width="15" stroke="#fff"/>\
                <polygon points="70, 55 70, 145 145, 100" fill="#fff"/>\
            </svg>\
        ')
    },
    hideVideoPlayButton: function() {
        video.play()
        videoPlayButton.classList.add('is-hidden')
        video.classList.remove('has-media-controls-hidden')
        video.setAttribute('controls', 'controls')
    }
}
videoMethods.renderVideoPlayButton();

不幸的是，似乎只有一个脚本适用于该文件。放在文件“main.js”的第二位的脚本不起作用。有没有办法让两个脚本在同一个文件中运行，或者我是否需要为每个要添加到主题的脚本创建一个“.js”文件？

显然在drupal和javascript两个新...

我欣赏一些帮助以理解js。

js脚本的顺序很重要？

0 个答案: