【发布时间】：2018-07-22 01:45:59
【问题描述】：
我正在尝试制作一个简单的 Nodejs/Express 应用程序，该应用程序将在单击 SHOW 按钮时显示海滩图像，然后在再次单击 SHOW 按钮时显示湖泊图像。
它是一个简单的 js 应用程序，但我是第一次尝试 Nodejs 和 Express。
海滩和湖泊的照片存储在我的应用程序的图像文件夹中。 这是我的代码
app.js
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
users.js
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
module.exports = router;
index.pug
extends layout
block content
h1= title
h4= "Click button below to see a photo of a beach"
<form id="show">
<button type="submit" class="btn btn-primary btn-margin">Show</button>
</form>
<div id="img">
</div>
<div class="image1">
<img src="img/beach-pic.jpg" alt="photo of beach" id="img1">
<img src="img/lake-pic.jpg" alt="photo of lake" id="img2">
</div>
javascript/jquery
$(document).ready(function(){
$("form#show").submit(function(){
event.preventDefault();
$("#img1").toggle();
if($("#img1").css('display') == 'inline'){
$("#img2").hide();
} else {
$("#img2").show();
}
});
});
css
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #00B7FF;
}
#img1 {
display: none;
}
#img2 {
display: none;
height: 500px;
width: 650px;
}
【问题讨论】：
-
无图像->单击“显示”->图像一->单击“显示”->图像二->单击“显示”->图像一等等...是这就是你要找的东西？
-
@Dhaval Jardosh：是的！
-
已添加答案，如果您正在寻找，请告诉我。
标签： javascript jquery node.js