Question

我正在尝试编写代码，当单击按钮时将显示新图片（从海滩图片到湖泊图片）。当前它在某种程度上可以正常工作，但是第一次单击时都显示了两张图片，第二次单击时海滩图片消失了。

这是我到目前为止所拥有的：

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/styles.css" type="text/css" media="all">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/scripts.js"></script>
    <title>Beach Photo </title>
  </head>
  <body>
    <h1>Photo of Beach </h1>
    <h4>Click button below to see a photo of a beach</h4>
    <br>
    <div class="container">
      <form id="show">
        <button type="submit" class="btn btn-primary btn-margin">Show</button>
        <br>

      </form>
      <br>
      <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>
    </div>
  </body>
</html>

jQuery：

$(document).ready(function(){
  $("form#show").submit(function(){
    event.preventDefault();

    $("#img1").toggle();
    $("#img2").show();
  });
});

CSS：

#img1 {
  display: none;
}

#img2 {
  display: none;
}

Answer 1

首先，检查＃img1是否可见，如果是，则隐藏＃img1并显示＃img2，反之亦然。

package javafxapplication1;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

/**
 *
 * @author 
 */
public class JavaFXApplication1 extends Application {
    
    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
        
        Scene scene = new Scene(root);
        
        stage.setScene(scene);
        stage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
    
}

$(document).ready(function() {
  $("form#show").submit(function() {
    event.preventDefault();

    if ($("#img1").is(':visible')) {

      $("#img1").hide();
      $("#img2").show();
    } else {

      $("#img1").show();
      $("#img2").hide();
    }
  });
});

#img1 {
  display: none;
}

#img2 {
  display: none;
}

Answer 2

在显示或隐藏第二张图像之前，只需检查是否显示了第一张图像。您可以尝试以下操作：

$(document).ready(function(){
  $("form#show").submit(function(){
    event.preventDefault();
   
    $("#img1").toggle();
    if($("#img1").is(':visible'))
      $("#img2").hide();
    else
      $("#img2").show();
  });
});

#img1 {
  display: none;
}

#img2 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Photo of Beach </h1>
<h4>Click button below to see a photo of a beach</h4>
<br>
<div class="container">
  <form id="show">
    <button type="submit" class="btn btn-primary btn-margin">Show</button>
    <br>

  </form>
  <br>
  <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>
</div>

Answer 3

您应该在沙滩上显示一张图片，然后隐藏另一张。

然后，对两个图像都使用一个类（可以使用您选择的类名！），将它们切换。

您绝对不需要表格。我删除了。

$(document).ready(function(){
  $(".photo-switcher").click(function(){
    $(".togglingImg").toggle();
  });
});

#img1 {
  display: inline;
  height:200px;
}

#img2 {
  display: none;
  height:200px;
}

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/styles.css" type="text/css" media="all">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <title>Beach Photo </title>
  </head>
  <body>
    <h1>Photo of Beach </h1>
    <h4>Click button below to see a photo of a beach</h4>
    <button type="button" class="btn photo-switcher">Show</button><br>
    <br>
    <img src="https://images.pexels.com/photos/127673/pexels-photo-127673.jpeg?auto=compress&cs=tinysrgb&h=350" alt="photo of beach" id="img1" class="togglingImg">
    <img src="https://upload.wikimedia.org/wikipedia/commons/2/23/Lake_mapourika_NZ.jpeg" alt="photo of lake" id="img2" class="togglingImg">
  </body>
</html>

Answer 4

首先，img1和img2隐藏（因为css：不显示）

第一次单击，切换为img1和show（）切换为img2。由于img1被隐藏-切换将显示它，而img2由于show（）而显示

第二次单击切换并再次显示。因为显示了img1-切换将其隐藏，并且img2由于show（）而显示

单击按钮时更改图片

4 个答案: