堆栈内存溢出
  繁体   English   中英

当我使用javascript单击按钮时，如何在另一页上显示特定图像？

[英]How to make a specific image display on another page when I click on a button using javascript?

 原文  2019-03-21 19:56:17  4   2    javascript/ html

问题描述

所以我有一个主页，其中包含指向不同产品的图像链接。 这些产品是鞋子。 它们实际上并不存在我将虚构的电子商务网站的前端作为个人项目。 我正在为这个项目使用html，css和plain javascript。 这些链接中的每一个都包含一个产品页面，您可以在其中单击按钮来购买产品。 它还有一个图像，名称和lorem ipsum用于描述。

购买按钮链接到结帐页面。 我想知道当我点击购买按钮时如何在此结帐页面上显示产品图像。 我希望结帐页面显示所购买产品的特定图像，而不是具有包含其他产品的不同图像的多个结帐页面。 因此，如果您点击第一个产品上的“立即购买”，如果我选择购买第二个产品，它应该在结帐页面上显示该产品的图像。 

 /* Grid */ * { box-sizing: border-box; } body { margin: 0; } .container { position: relative; width: 100%; max-width: 1300px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} [class*="col-"] { float: left; padding: 15px; } .row::after { content: ""; clear: both; display: table; } /* Media Queries */ /* For mobile phones: */ @media only screen and (max-width: 600px) { [class*="col-"] { width: 100%; } } /* For desktop: */ @media only screen and (min-width: 768px) { .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} } /* Extra small devices (phones, 600px and down) */ .topnav { overflow: hidden; } .topnav a { float: left; display: block; color: #363636; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; font-family: 'Lato', sans-serif; } .topnav a:hover { border-style: solid; border-width: thin; border-color: gainsboro; color: black; } .topnav .icon { display: none; } @media screen and (max-width: 600px) { .topnav a {display: none;} .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: center; } } /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) {...} /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) {...} /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) {...} /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) {...} /* */ #cart { float: right; font-size: 30px; color: #363636; padding: 10px; margin-left: 30px; } #cart:hover { border-style: solid; border-width: thin; border-color: gainsboro; } #search-bar { width: 50%; padding: 10px; border-radius: 10px; border: 1px solid #d9d9d9; box-shadow: 1px 2px 3px #bfbfbf; } #search-button { text-decoration: none; color: white; background-color: skyblue; padding: 10px; width: 70px; border-radius: 10px; box-shadow: 1px 2px 3px #bfbfbf; } #search-button:hover { cursor: pointer; } img { width: 100%; border: 1px solid #e6e6e6; border-radius: 10px; box-shadow: 1px 2px 3px #bfbfbf; } .name-and-price { font-family: 'Lato', sans-serif; } .login-signup { font-family: 'Lato', sans-serif; float: right; } .login-signup a { text-decoration: none; } #buy-section { border: 1px solid #e6e6e6; border-radius: 5px; width: 150px; height: 200px; } #footer { margin-top: 20%; text-align: center; } .action-buttons { padding: 15px; width: 70%; margin-left: 21px; margin-top: 10px; border-radius: 5px; } .action-buttons:hover { cursor: pointer; } #buy-button { background-color: orangered; color: #ffffff; } #cart-button { background-color: #f6f6f6; } #save-button { background-color: lightgray; } 
 <!DOCTYPE html> <html> <head> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> </head> <body> <!-- Navigation --> <div class="container"> <div class="row"> <div class="col-6"> <div class="topnav" id="myTopnav"> <a href="index.html">Home</a> <a href="#">About</a> <a href="#">Contact</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fas fa-bars"></i> </a> </div> </div> <div class="col-6"> <a href="#"><i id="cart" class="fas fa-shopping-cart"></i></a><p class="login-signup"><a href="#">Login</a> or <a href="#">Sign up</a></p> </div> </div> </div> <!-- Searchbar --> <div class="container"> <div class="row"> <div class="col-12"> <input id="search-bar" type="text" placeholder="Type something..."> <button id="search-button">Search</button> </div> </div> </div> <!-- Product --> <div class="container"> <div class="row"> <div class="col-6"> <img src="images/shoes1.jpeg" alt="Shoes"> <p class="name-and-price">Black and white nike running shoes <br>$90.00</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus turpis a erat vehicula, sed molestie leo aliquet.</p> </div> <div class="col-6"> <!-- buy section --> <div id="buy-section"> <a href="checkout.html"><button class="action-buttons" id="buy-button">Buy Now</button></a> <button class="action-buttons" id="cart-button">Add to Cart</button> <button class="action-buttons" id="save-button">Save for Later</button> </div> </div> </div> </div> <!-- Footer --> <div class="container" id="footer"> <div class="row"> <div class="col-12"> <footer>Copyright &copy; 2019</footer> </div> </div> </div> <script src="js/functionality.js"></script> </body> </html>

2 个解决方案

解决方案1
 0 已采纳  2019-03-21 20:06:47

您必须将产品详细信息保存在MySQL（DBMS-数据库管理系统）等数据库中，并且需要使用服务器端脚本语言（如PHP，Java，NodeJS等）来检索数据库详细信息。

否则，您需要在本地存储中保留产品ID和产品映像的路径。 如果您在多个选项卡中打开相同的产品，这将非常复杂。 - 使用第一种方法 - 。

您可以选择其中一种方法。 我认为你不需要使用第二种方法。 对于像在线商店这样的项目，您应该使用后端技术。 服务器端脚本和数据库管理系统。

数据库是存储所有产品信息和用户信息的地方。

解决方案2
 0  2019-03-21 20:37:52

嗨亚历山大欢迎来到StackOverflow。

您可以在localStorage上保存产品的图像链接。 localStorage使数据保持全局，并可供同一域的所有页面使用。 如果您不想使用localStorage，可以使用WebSql，IndexedDB或服务器端DBMS，如MySql。

如果您选择在浏览器上保留应用程序的状态数据，请考虑使用LocalForage。

如果您选择在浏览器上保留应用程序的状态数据，请考虑使用LocalForage 。

使用localStorage的Bellow单个示例。 

    /* On home page */
var product = {
  name: "Some name",
  price: 1.75,
  description: "description",
  image: "https://picsum.photos/375"
}

function buttonClick() {
  console.log("Saving on localStorage");
  localStorage.setItem("selectedProduct", JSON.stringify(product) );
}

/* on any other page */

function getSelectedProduct() {
  console.log("Recovering data")
  var product = JSON.parse(localStorage.getItem("selectedProduct"));
  console.log(product)
}

/* MOCK test */
buttonClick();
getSelectedProduct();

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 单击使用Javascript的选择按钮时，在另一个窗口上显示图像 当我单击 Javascript 中另一个按钮的内容时，如何关闭一个按钮内容 单击“特定”按钮时如何显示特定值 当我使用jQuery动态单击按钮时如何在页面的特定位置上创建聊天框 如何使用JavaScript单击按钮将用户重定向到另一个页面？ JavaScript：如何使图像在单击按钮时显示？ 如何使用Javascript创建一个显示页面上已用时间的按钮 当我单击图像中的超链接点而不在另一个页面上打开它时，如何使此音频剪辑在同一页面上打开？ 当我使用 Javascript 和 JQuery 单击显示按钮时，我想在显示模式中显示我的 td 的图像数据，但找不到 src 的路径 单击页面上的另一个按钮时如何打开导航/选项卡？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM