javascript - 用鼠标悬停显示信息

Question

我正在尝试创建一个允许用户从菜单下订单的应用程序。我的问题是当用户将鼠标悬停在菜单中的一个图像上时，应该显示另一个图像，其中包含商品的描述和价格。每个图像的 id 属性标识了在滚动时要显示的图像。我厌倦了管理第一张图片来翻转并显示描述和价格，但问题是当你点击第一张图片时，它没有在订单框上显示价格，而且图片也没有显示

$(function(){
  
  //declare prices and varaibles
  var item1 = $("#item1");
  item1.val(7.99);
  
  var item2 = $("#item2");
  item2.val(1.99);
  
  var item3 = $("#item3");
  item3.val(9.99);
  
  var item4 = $("#item4");
  item4.val(12.99);
  
  var item5 = $("#item5");
  item5.val(17.99);
  
  var item6 = $("#item6");
  item6.val(3.99);
 
  var Total = $("#Total");
  var Amount = 0; 
 
  //onclick
  var item = $(".item");
  var txtArea = $("#txtArea");
  var orderList = "";
  
  //Events
  item.click(function(event){
    
    Amount+=parseFloat($(event.target).val());
    orderList+=parseFloat($(event.target).val())+"$ -"+event.target.id  +"\n";
    
    txtArea.val(orderList);
    Total.html("Total: "+Amount.toFixed(2)+"$");
    
   
  });
  
  //Events
  item.hover(function(){
   $(event.target).text($(event.target).val()+"$");
    $(event.target).addClass("dark");
    
  }, function(){
     $(event.target).text("");
    $(event.target).removeClass("dark"); 
});
    
    
  //Clear Button
  var ClearOrder = $("#ClearOrder");
  //Events
  ClearOrder.click(function(){
    
    Amount = 0;
    Total.html("Total: "+Amount.toFixed(2));
    orderList ="";
    txtArea.val(orderList);
  });
    
   
 
            
       
            
 
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
})

* {
  box-sizing: border-box;
   font-family: "san-serif";
}

body{
  margin:0px;
  padding:0px;
  
}

.Outside-Container{
  margin:10px;
  position:absolute;
  border:2px solid black;
  border-radius:5%;
  width:60%;
  height:auto;
  left:20%;
  overflow:hidden;
}

.container{
  position:relative;
  width:70%;
  height:auto;
  left:15%;
  overflow:hidden;
 
 
}

.top-logo-holder{
  width:100%;
  height:auto;
}

.logo-img{
    width: 31%; 
    display: block;
    margin: 0 auto;
}

.line{
  
  height:2px;
  width:100%;
  position:relative;
  background:teal;
  border-radius:25%;
}

.main-section{
  width:100%;
  position:relative;
  height:auto;
}

.row1{
  display:flex;
  flex-wrap:no-wrap;
  flex-direction: row;
}

.row2{
  display:flex;
  flex-wrap:no-wrap;
  flex-direction: row;
  transition:0.8s;
}

.item{
  width:300px;
  height:17vh;
  background:pink;
  margin:5px;
  color:#fff;
  transition:0.3s;
  font-size:20px;
  cursor:pointer;
}

.row1 .item:nth-child(1){
  background:url("https://i.postimg.cc/2yCtXwNn/img1.jpg");
  background-size:cover;
 
}

.row1 .item:nth-child(2){
  background:url("https://i.postimg.cc/vTXKRVGk/img2.jpg");
  background-size:cover;
}
.row1 .item:nth-child(3){
  background:url("https://i.postimg.cc/J7QvH9jx/img3.jpg");
  background-size:cover;
}

.row2 .item:nth-child(1){
  background:url("[img4.jpg](https://postimg.cc/hh6pg86y)");
  background-size:cover;
}
.row2 .item:nth-child(2){
  background:url("https://i.postimg.cc/vZ4NjTk2/img5.jpg");
  background-size:cover;
}
.row2 .item:nth-child(3){
  background:url("https://i.postimg.cc/vZ4NjTk2/img5.jpg");
  background-size:cover;
}


#txtArea{
  width:60%;
  height:150px;
}

.last-footer-line{
  
  width:100%;
  height:auto;
  margin-bottom:20px;
}


.dark{
  filter:brightness(0.7);
  text-align:center;
  font-size:20px;
  line-height: 5em;
}


 .flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css">
 <script src="js/tabs.js"></script>


<head>
 

<title>Test</title>
</head>

<body>
 <div class="Outside-Container">
  <div class = "container">
   
   
   
   
    <div class="top-logo-holder">
     
       <img src ="https://i.postimg.cc/pL36txtW/logo.png" class="logo-img"/>
     
  <div class="line"></div>
     
  </div>  
   
    <div class="main-section">
      <div class ="row1">
        
        <div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <div class="flip"></div>
    </div>
    <div class="flip-card-back">
      <h1>Coffee</h1>
      <h1>7.22$</h1>
     
    </div>
  </div>
</div> 
         <div class="item" id="item2"></div>
         <div class="item" id="item3"></div>
      </div>
     
       <div class ="row2">
        <div class="item" id="item4"></div>
         <div class="item" id="item5"></div>
         <div class="item" id="item6"></div>
      </div>
        <div class="line"></div>
      <p>Your Order:</p>
      <textarea name="message" id="txtArea"></textarea>
       <p id="Total">Total: </p>
    </div>  
   
   
    <div class="last-footer-line">
      <button id="PlaceOrder">Place Order</button>
       <button id="ClearOrder">Clear Order</button>
      <div>
     
     
    </div>
   
   
   
   
</div>
</div>
   <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="js/tabs.js"></script>
</body>
   
</html>

标签： javascriptjqueryhtmlcss

Answer 1

$(function() {

  //declare prices and varaibles
  var item1 = $("#item1");
  item1.val(7.99);

  var item2 = $("#item2");
  item2.val(1.99);

  var item3 = $("#item3");
  item3.val(9.99);

  var item4 = $("#item4");
  item4.val(12.99);

  var item5 = $("#item5");
  item5.val(17.99);

  var item6 = $("#item6");
  item6.val(3.99);

  var Total = $("#Total");
  var Amount = 0;

  //onclick
  var item = $(".item");
  var txtArea = $("#txtArea");
  var orderList = "";

  //Events

  $('.flip-card-back').click(function() {
    var price = $('.flip-card-back .Item1_price').text().slice(0, -1);

    Amount += parseFloat(price);
    orderList += parseFloat(price) + "$ -item1 \n";

    txtArea.val(orderList);
    Total.html("Total: " + Amount.toFixed(2) + "$");


  });
  item.click(function(event) {

    Amount += parseFloat($(event.target).val());
    orderList += parseFloat($(event.target).val()) + "$ -" + event.target.id + "\n";

    txtArea.val(orderList);
    Total.html("Total: " + Amount.toFixed(2) + "$");


  });

  //Events
  item.hover(function() {
    $(event.target).text($(event.target).val() + "$");
    $(event.target).addClass("dark");

  }, function() {
    $(event.target).text("");
    $(event.target).removeClass("dark");
  });


  //Clear Button
  var ClearOrder = $("#ClearOrder");
  //Events
  ClearOrder.click(function() {

    Amount = 0;
    Total.html("Total: " + Amount.toFixed(2));
    orderList = "";
    txtArea.val(orderList);
  });


























})

* {
  box-sizing: border-box;
  font-family: "san-serif";
}

body {
  margin: 0px;
  padding: 0px;
}

.Outside-Container {
  margin: 10px;
  position: absolute;
  border: 2px solid black;
  border-radius: 5%;
  width: 60%;
  height: auto;
  left: 20%;
  overflow: hidden;
}

.container {
  position: relative;
  width: 70%;
  height: auto;
  left: 15%;
  overflow: hidden;
}

.top-logo-holder {
  width: 100%;
  height: auto;
}

.logo-img {
  width: 31%;
  display: block;
  margin: 0 auto;
}

.line {
  height: 2px;
  width: 100%;
  position: relative;
  background: teal;
  border-radius: 25%;
}

.main-section {
  width: 100%;
  position: relative;
  height: auto;
}

.row1 {
  display: flex;
  flex-wrap: no-wrap;
  flex-direction: row;
}

.row2 {
  display: flex;
  flex-wrap: no-wrap;
  flex-direction: row;
  transition: 0.8s;
}

.item {
  width: 300px;
  height: 17vh;
  background: pink;
  margin: 5px;
  color: #fff;
  transition: 0.3s;
  font-size: 20px;
  cursor: pointer;
}

.row1 .item:nth-child(1) {
  background: url("https://i.postimg.cc/2yCtXwNn/img1.jpg");
  background-size: cover;
}

.row1 .item:nth-child(2) {
  background: url("https://i.postimg.cc/vTXKRVGk/img2.jpg");
  background-size: cover;
}

.row1 .item:nth-child(3) {
  background: url("https://i.postimg.cc/J7QvH9jx/img3.jpg");
  background-size: cover;
}

.row2 .item:nth-child(1) {
  background: url("[img4.jpg](https://postimg.cc/hh6pg86y)");
  background-size: cover;
}

.row2 .item:nth-child(2) {
  background: url("https://i.postimg.cc/vZ4NjTk2/img5.jpg");
  background-size: cover;
}

.row2 .item:nth-child(3) {
  background: url("https://i.postimg.cc/vZ4NjTk2/img5.jpg");
  background-size: cover;
}

#txtArea {
  width: 60%;
  height: 150px;
}

.last-footer-line {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.dark {
  filter: brightness(0.7);
  text-align: center;
  font-size: 20px;
  line-height: 5em;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}


/* This container is needed to position the front and back side */

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}


/* Do an horizontal flip when you move the mouse over the flip box container */

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}


/* Position the front and back side */

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}


/* Style the front side (fallback if image is missing) */

.flip-card-front {
  background-color: #bbb;
  color: black;
}


/* Style the back side */

.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<script src="js/tabs.js"></script>


<head>


  <title>Test</title>
</head>

<body>
  <div class="Outside-Container">
    <div class="container">




      <div class="top-logo-holder">

        <img src="https://i.postimg.cc/pL36txtW/logo.png" class="logo-img" />

        <div class="line"></div>

      </div>

      <div class="main-section">
        <div class="row1">

          <div class="flip-card">
            <div class="flip-card-inner">
              <div class="flip-card-front">
                <div class="flip"></div>
              </div>
              <div class="flip-card-back">
                <h1>Coffee</h1>
                <h1 class='Item1_price'>7.22$</h1>

              </div>
            </div>
          </div>
          <div class="item" id="item2"></div>
          <div class="item" id="item3"></div>
        </div>

        <div class="row2">
          <div class="item" id="item4"></div>
          <div class="item" id="item5"></div>
          <div class="item" id="item6"></div>
        </div>
        <div class="line"></div>
        <p>Your Order:</p>
        <textarea name="message" id="txtArea"></textarea>
        <p id="Total">Total: </p>
      </div>


      <div class="last-footer-line">
        <button id="PlaceOrder">Place Order</button>
        <button id="ClearOrder">Clear Order</button>
        <div>


        </div>




      </div>
    </div>
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="js/tabs.js"></script>
</body>

</html>