javascript - 在 Nodejs 和 Express 中使用 JQuery 需要帮助

Question

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

它作为一个简单的 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;
}

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>