单击按钮时更改图片JQuery答案

【问题标题】：Change picture when button is clicked JQuery单击按钮时更改图片JQuery
【发布时间】：2018-07-21 04:10:44
【问题描述】：

我正在尝试编写在单击按钮时显示新图片（从海滩图片到湖泊图片）的代码。目前它有点工作，但第一次点击时两张图片都出现了，第二次点击时海滩图片消失了。

这是我目前所拥有的：

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

$(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>

【讨论】：

【解决方案2】：

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

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.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>
  <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="https://kongdeetourthai.com/wp-content/uploads/2018/06/apple-icon.png" alt="photo of beach" id="img1">
      <img src="https://freeiconshop.com/wp-content/uploads/edd/google-flat.png" alt="photo of lake" id="img2">
    </div>
  </div>

</body>

</html>

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

首先，img1和img2被隐藏（因为css: display none）

首先单击，切换为 img1 和 show() 为 img2。因为 img1 是隐藏的 - toggle 会显示它，而 img2 会因为 show() 而显示

第二次点击切换并再次显示。由于显示了 img1 - toggle 会隐藏它，而 img2 会因为 show() 而显示

【讨论】：

有没有办法解决这个问题，让第一次点击时只显示img1，第二次点击按钮时只显示img2。