我本周开始学习javascript,而且我已经掌握了基础知识.我已经开始为使用切换开关来打开和关闭目标div的页面构建一个"FAQ"部分.
但是,默认情况下,div的显示设置为可见.我已经设置了一个函数,将其设置为隐藏,以便下拉列表在页面加载时折叠.我已经尝试堆叠它们(切换功能和显示功能),在body标签的"onLoad"中用分号分隔它们.
现在,在我应用这些函数来运行"onLoad"之前,两者都运行良好.但是现在只有第二个函数可以切换div,但是声明让div折叠onLoad的函数不是.
我在哪里错了？
此外,看到我是新手,如果有更好的方式,或更多的速记版本,请随时让我知道:)
CSS:
body {
background-color: #cccccc;
padding: 0;
margin: 0;
}
.container {
margin-left: 20%;
margin-right: 20%;
background-color: white;
padding: 1em 3em 1em 3em;
}
.toggle-header {
padding: 0.5em;
background-color: #0067b1;
overflow: auto;
}
#toggle {
border: none;
width: 300;
height: 3em;
background-color: #0067b1;
outline: 0;
}
.button-container {
float: right;
margin-right: 0.5em;
display: inline-block;
}
.dropdowns {
padding: 2em;
background-color: #eeeeee;
}
HTML和Javascript:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Toggle Template</title>
</head>
<body onLoad="toggleOnLoad(); toggleFunction()"> …我正在尝试设置一个项目，但在保存项目时似乎无法刷新 webpack。
它似乎根本没有重新编译bundle.js，我已经重新运行脚本以查看目前跟踪的任何更改。
下面是我的 webpack 配置和 package.json 文件的脚本部分。
webpack.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: "./src/index.js",
mode: "none",
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test:/\.(s*)css$/,
use:[
'style-loader?sourceMap',
'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
'sass-loader'
]
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192&name=images/[name].[ext]',
}
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/templates/index.html"
})
]
};
从 package.json 运行的脚本
"scripts": {
"build": "webpack", …所以我安装了babel 7，同时在预设环境中包含了插件“ @ babel / plugin-proposal-object-rest-spread”，但是由于它没有转换我的传播运算符，我仍然遇到以下错误回到es2015。
SCRIPT1028: Expected identifier, string or number
我尝试在.babelrc文件中的plugin数组中引用该插件。
我的.babelrc文件：
{
"presets": [
"@babel/preset-react",
"@babel/preset-env", {
"include": [
"@babel/plugin-proposal-object-rest-spread"
]
}
],
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-json-strings",
]
}
我的package.json依赖项/ dev依赖项：
"dependencies": {
"@babel/polyfill": "^7.2.5",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.1.3",
"core-js": "^2.6.3",
"dotenv": "^6.1.0",
"get-base64": "^1.3.0",
"history": "^4.7.2",
"moment": "^2.22.2",
"prop-types": "^15.6.2",
"qs": "^6.5.2",
"react": "^16.6.0",
"react-debounce-input": "^3.2.0",
"react-dom": "^16.6.0",
"react-onclickoutside": "^6.7.1",
"react-redux": "^5.1.0",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"react-select": "^2.1.2",
"redux": "^4.0.1",
"redux-devtools-extension": "^2.13.5", …我正在尝试使用 perl 在 .tt2 文件中设置条件。我有一个对象page需要检查标题。但是我似乎无法让它工作。我哪里出错了？我只是想在这个阶段转储内容以确保其正常工作，但它只是抛出一条cannot render template错误消息
[% IF page.title eq 'User Api List' %]
[%
"<pre>";
USE dumper(indent = 1);
dumper.dump(page.title) | html
"</pre>";
%]
[% END %]
如果字符串长于设定值，我正在尝试使用 perl 截断选择输入选项中的字符串，但我无法使其正常工作。
my $value = defined $option->{value} ? $option->{value} : '';
my $maxValueLength = 50;
if ($value.length > $maxValueLength) {
$value = substr $value, 0, $maxValueLength + '...';
}