网站首页
精品模板
会员模板
建站资源
站长素材
建站教程
编程笔记
编程问答
编程问答
前端开发问题 Java开发问题 C/C++开发问题 Python开发问题 C#/.NET开发问题 php开发问题 移动开发问题 数据库问题
沃梦达建站-编程问答-前端开发问题-正文

尽管在静态目录中有它，但无法将 javascript 应用于我在烧瓶中的模板.如何在下面的代码中解决这个问题?

2023-09-05前端开发问题
1
本文介绍了尽管在静态目录中有它，但无法将 javascript 应用于我在烧瓶中的模板.如何在下面的代码中解决这个问题?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

我有一个烧瓶项目，我正在尝试制作 tree 结构，但我不认为 JS 被应用于我的 tree.html它无法扩展选项.以下是我在互联网上找到的代码，由于我没有任何前端经验，因此我正在尝试使其工作.非常感谢您的帮助.

I have a flask project in which I'm trying to make a tree structure but I don't think the JS is being applied to my tree.html as it couldn't expand the options. Below is the code that I found in internet which I'm trying to make work as I don't have any frontend experience. I'd be grateful for your help.

Base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <script type="text/javascript" src="/static/jsfun.js"></script>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>

tree.html

{% extends "base.html" %}

{% block content %}
    <ul class="tree">
        <li><a href="#">Part 1</a>
            <ul>
                <li><a href="#">Item A</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item B</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item C</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item D</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item E</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>

        <li><a href="#">Part 2</a>
            <ul>
                <li><a href="#">Item A</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item B</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item C</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item D</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item E</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>

        <li><a href="#">Part 3</a>
            <ul>
                <li><a href="#">Item A</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item B</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item C</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item D</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item E</a>
                    <ul>
                        <li><a href="#">Sub-item 1</a></li>
                        <li><a href="#">Sub-item 2</a></li>
                        <li><a href="#">Sub-item 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
{% endblock %}

jsfun.js

var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
for(var i = 0; i < tree.length; i++){
    tree[i].addEventListener('click', function(e) {
        var parent = e.target.parentElement;
        var classList = parent.classList;
        if(classList.contains("open")) {
            classList.remove('open');
            var opensubs = parent.querySelectorAll(':scope .open');
            for(var i = 0; i < opensubs.length; i++){
                opensubs[i].classList.remove('open');
            }
        } else {
            classList.add('open');
        }
    });
}

这是页面打开的时间

当我点击任何项目时，什么都没有发生:

And nothing happens when I click any item:

推荐答案

请查看 this repo.检查你在哪里犯了错误.我相信它是您导入 js 文件的方式.你应该像下面这样使用

Please check this repo. Check where you are making a mistake. I believe its the way you are importing the js file. you should use like below

<script src="{{ url_for('static', filename='js/jsfun.js') }}"></script>

这篇关于尽管在静态目录中有它，但无法将 javascript 应用于我在烧瓶中的模板.如何在下面的代码中解决这个问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

The End

相关推荐

js删除数组中指定元素的5种方法
在JavaScript中，我们有多种方法可以删除数组中的指定元素。以下给出了5种常见的方法并提供了相应的代码示例： 1.使用splice()方法： let array = [0, 1, 2, 3, 4, 5];let index = array.indexOf(2);if (index -1) { array.splice(index, 1);}// array = [0,...
2024-11-22 前端开发问题
182
layui 实现实时刷新一个外部的div
主页面上显示了一个合计，在删除和增加的时候需要更改这个总套数的值： //html代码div class="layui-inline layui-show-xs-block" style="margin-left: 10px" id="sumDiv"spanSOP合计:/spanspan${totalNum}/spanspan套/span/div 于是在我们删除这个条数据后，...
2024-11-14 前端开发问题
156
layui要如何改变时间日历布局大小？
问题描述 我想改变layui时间日历布局大小，这个要怎么操作呢？ 解决办法 可以用css样式对时间日历进行重新布局，具体代码如下： !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...
2024-10-24 前端开发问题
271
JavaScript小数运算出现多位的解决办法
在开发JS过程中，会经常遇到两个小数相运算的情况，但是运算结果却与预期不同，调试一下发现计算结果竟然有那么长一串尾巴。如下图所示： 产生原因： JavaScript对小数运算会先转成二进制，运算完毕再转回十进制，过程中会有丢失，不过不是所有的小数间运算会...
2024-10-18 前端开发问题
301
jQuery怎么动态向页面添加代码？
append() 方法在被选元素的结尾（仍然在内部）插入指定内容。 语法： $(selector).append( content ) var creatPrintList = function(data){ var innerHtml = ""; for(var i =0;i data.length;i++){ innerHtml +="li class='contentLi'"; innerHtml +="a href...
2024-10-18 前端开发问题
125
JavaScript(js)文件字符串中丢失＂\＂斜线的解决方法
问题描述： 在javascript中引用js代码，然后导致反斜杠丢失，发现字符串中的所有\信息丢失。比如在js中引用input type=text onkeyup=value=value.replace(/[^\d]/g,) ，结果导致正则表达式中的\丢失。 问题原因： 该字符串含有\，javascript对字符串进行了转...
2024-10-17 前端开发问题
437

热门文章

1错误 [ERR_REQUIRE_ESM]:不支持 ES 模块的 require() 2vue中yarn install报错：info There appears to be trouble with you 3为什么 Chrome(在 Electron 内部)会突然重定向到 chrome-error://chromewebdat 4“aria-hidden 元素不包含可聚焦元素"显示模态时的问题 5使用选择器在 CSS 中选择元素的前一个兄弟 6js报错：Uncaught SyntaxError: Unexpected string 7layui怎么刷新当前页面？ 8将模式设置为“no-cors"时使用 fetch 访问 API 时出错

热门精品源码

最新VIP资源

1多功能实用站长工具箱html功能模板 2多风格简历在线生成程序网页模板 3论文相似度查询系统源码 4响应式旅游景点宣传推广页面模板 5在线起名宣传推广网站源码 6酷黑微信小程序网站开发宣传页模板 7房产销售交易中介网站模板 8小学作业自动生成程序