Javascript 单击按钮时更改图片JQuery_Javascript_Jquery_Html_Css

Javascript 单击按钮时更改图片JQuery

javascript jquery html css

Javascript 单击按钮时更改图片JQuery,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试编写代码，当点击一个按钮时，将显示一个新的图片（从海滩图片到湖泊图片）。目前，这是一些工作，但这两个图片显示在第一次点击和海滩图片消失在第二次点击以下是我到目前为止的情况： HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.css"> <l

我正在尝试编写代码，当点击一个按钮时，将显示一个新的图片（从海滩图片到湖泊图片）。目前，这是一些工作，但这两个图片显示在第一次点击和海滩图片消失在第二次点击

以下是我到目前为止的情况：

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>

CSS:

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

首先单击，切换img1，并显示img2（）。因为img1是隐藏的-toggle将显示它，而img2显示是因为show（）

第二次单击切换并再次显示。由于img1已显示-toggle将隐藏它，而img2显示是因为show（）

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

首先单击，切换img1，并显示img2（）。因为img1是隐藏的-toggle将显示它，而img2显示是因为show（）

第二次单击切换并再次显示。由于img1已显示-toggle将隐藏它，而img2显示是因为show（）

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

$（文档）.ready（函数（）{
$（“表单显示”）.submit（函数（）{
event.preventDefault（）；
如果（$（“#img1”）。是（':visible'））{
$（“#img1”）.hide（）；
$（“#img2”）.show（）；
}否则{
$（“#img1”）.show（）；
$（“#img2”）.hide（）；
}
});
});
#img1{
显示：无；
}
#img2{
显示：无；
}

海滩照片
海滩照片
单击下面的按钮查看海滩的照片


显示




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

$（文档）.ready（函数（）{
$（“表单显示”）.submit（函数（）{
event.preventDefault（）；
如果（$（“#img1”）。是（':visible'））{
$（“#img1”）.hide（）；
$（“#img2”）.show（）；
}否则{
$（“#img1”）.show（）；
$（“#img2”）.hide（）；
}
});
});
#img1{
显示：无；
}
#img2{
显示：无；
}

海滩照片
海滩照片
单击下面的按钮查看海滩的照片


显示




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

$（文档）.ready（函数（）{
$（“表单显示”）.submit（函数（）{
event.preventDefault（）；
$（“#img1”）.toggle（）；
如果（$（“#img1”）。是（':visible'））
$（“#img2”）.hide（）；
其他的
$（“#img2”）.show（）；
});
});
#img1{
显示：无；
}
#img2{
显示：无；
}

海滩照片
单击下面的按钮查看海滩的照片


显示




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

$（文档）.ready（函数（）{
$（“表单显示”）.submit（函数（）{
event.preventDefault（）；
$（“#img1”）.toggle（）；
如果（$（“#img1”）。是（':visible'））
$（“#img2”）.hide（）；
其他的
$（“#img2”）.show（）；
});
});
#img1{
显示：无；
}
#img2{
显示：无；
}

海滩照片
单击下面的按钮查看海滩的照片


显示




您应该在加载时显示一张图片，海滩。。。把另一个藏起来
然后，使用一个类（您可以选择使用类名！）对两个图像进行切换
你绝对不需要表格。我把它拿走了

$（文档）.ready（函数（）{
$（“.photo switcher”）。单击（函数（）{
$（“.togglingImg”）.toggle（）；
});
});
#img1{
显示：内联；
高度：200px；
}
#img2{
显示：无；
高度：200px；
}

海滩照片
海滩照片
单击下面的按钮查看海滩的照片
显示



您应该在加载时显示一张图片，海滩。。。把另一个藏起来
然后，使用一个类（您可以选择使用类名！）对两个图像进行切换
你绝对不需要表格。我把它拿走了

$（文档）.ready（函数（）{
$（“.photo switcher”）。单击（函数（）{
$（“.togglingImg”）.toggle（）；
});
});
#img1{
显示：内联；
高度：200px；
}
#img2{
显示：无；
高度：200px；
}

海滩照片
海滩照片
单击下面的按钮查看海滩的照片
显示



是否有办法修复它，使第一次单击时仅显示img1，第二次单击按钮时显示img2。是否有办法修复它，使第一次单击时仅显示img1，第二次单击按钮时显示img2。
$(document).ready(function(){
  $("form#show").submit(function(){
    event.preventDefault();

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

#img1 {
  display: none;
}

#img2 {
  display: none;
}