Question

我正在尝试制作一个简单的Nodejs / Express应用程序，当单击“ SHOW”按钮时将显示海滩的图像，然后再次单击“ SHOW”按钮时将显示湖的图像。

它可以作为一个简单的js应用程序使用，但我是第一次尝试Nodejs和Express。

海滩和湖泊的照片存储在我的应用程序的images文件夹中。这是我的代码

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;
}

Answer 1

对两个图像都使用display:none，并在需要时进行切换。

只有通过第一条if-else语句来处理第一幅图像的显示。

$(document).ready(function() {
  $("#show").submit(function(event) {
    event.preventDefault();

    //Handle 1st Image Render
    if ($("#img1").css('display') == 'none' && $("#img2").css('display') == 'none') {
      $("#img1").css('display', 'block');
    }


    //Toggle After 1st render
    else if ($("#img1").css('display') == 'block') {
      $("#img2").css('display', 'block');
      $("#img1").css('display', 'none');
    } else if ($("#img2").css('display') == 'block') {
      $("#img1").css('display', 'block');
      $("#img2").css('display', 'none');
    }


  });
});

#img1,
#img2 {
  display: none;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="show">
  <button id="lol" class="btn btn-primary btn-margin">Show</button>
</form>
<div id="img">

</div>

<div class="image1">
  <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350" alt="photo of beach" id="img1">
  <img src="https://images.pexels.com/photos/247600/pexels-photo-247600.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350" alt="photo of lake" id="img2">
</div>

Answer 2

一切看起来不错，现在到底在做什么？您的图像是否显示在页面上？您的Node端点是否正常工作？

Answer 3

我不知道您的布局中存在什么，但是我认为一个可能的错误是您可能没有在您的pug文件中包含jQuery或JavaScript文件，因为我尝试运行非常相似的代码并且它运行了完全适合我。另一个可能的错误是包括两者的顺序，请确保首先包含jQuery，然后包含您的js文件。如果仍然无法正常运行，请检查控制台是否存在任何潜在的错误，通常可以解决问题。

需要在Node.js和Express中使用JQuery的帮助

3 个答案: