Как показать информацию на обороте изображения?

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>

Answer 1

ОБНОВЛЕНИЕ 1 Модифицированный вопрос OP с учетом фактических требований.

Новый ответ:

• все ваши .item должны выглядеть как первые .flip-card.
• Вы комбинируете несколько предыдущих попыток (элементы) с новой попыткой (флипкарта), но забыли правильно отрегулировать CSS и JS, чтобы отразить изменения. Я изменяю item eventlistener для работы только с flipcard и flipcard.
• измененная секунда <h1> во флипкарте, <h1 id="item1">
• Изменены вычисления в flipcard.onclick чтобы показать суммы

Код этого ответа от вашего кодового столика , измененного с моими изменениями.

ОБНОВЛЕНИЕ 2

• Major HTML change: все предметы превращены в флипкарты. Одной из проблем было то, что вы присвоили value s элементам, которые не могут иметь value s. jQuery val() функция работает только с элементами, которые могут иметь value s, например <input>
• , удалить все ссылки на item из CSS

ОБНОВЛЕНИЕ 3

Исправлена ​​проблема с NaN, дочерние элементы флипкарты, необходимые для игнорирования события щелчка (CSS), так как JS получил неправильную ссылку на элемент. CSS и JS исправлены. Также добавлено .price в HTML для JS, чтобы легко найти ценник.

Оставив точную настройку, и вот вам ...

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

var txtArea = $("#txtArea");
var orderList = "";

// onclick, CHANGED
// Events, CHANGED
$(".flip-card").click(function(event) {

var priceTag = $(event.target).find('.price');
var price    = Number(priceTag.val());

  Amount += price;
  orderList += price + "$ - " + priceTag[0].id + "\n";

  txtArea.text(orderList);
  
  // Only round the final value
  Total.html("Total: " + Amount.toFixed(2) + "$");
});

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

/* MODIFIED */
/* IDs starting with 'flip' */
[id^="flip"] { background-size: cover }

/* flipcard front images */
#flip1 { background-image: url("https://i.postimg.cc/2yCtXwNn/img1.jpg") }
#flip2 { background-image: url("https://i.postimg.cc/vTXKRVGk/img2.jpg") }
#flip3 { background-image: url("https://i.postimg.cc/J7QvH9jx/img3.jpg") }
#flip4 { background-image: url("https://i.postimg.cc/hh6pg86y/img4.jpg") }
#flip5 { background-image: url("https://i.postimg.cc/vZ4NjTk2/img5.jpg") }
#flip6 { background-image: url("https://i.postimg.cc/vZ4NjTk2/img5.jpg") }
/**/

/* ADDED */
.flip-card * {
/*
    needed for jQuery onclick,
    flipcard children (h1,#item,etc) must ignore clicksss.
*/
 pointer-events: none;
}

[id^="item"] {
 width: 300px;
 border: none;
 background-color: transparent;
 color: currentColor;
 font-size: 2em;
 font-weight: bold;
 text-align: center
}

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

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

/* OBSOLETE
.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);
}

/* little debug helper */
[outlines="1"] * { outline: 1px dashed Crimson }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body outlines="0">
    <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 id="flip1" class="flip-card-front">
                                <div class="flip"></div>
                            </div>
                            <div class="flip-card-back">
                                <h1>Espresso</h1>
                                <input class="price" id="item1" type="text" readonly>
                            </div>
                        </div>
                    </div>

                    <div class="flip-card">
                        <div class="flip-card-inner">
                            <div id="flip2" class="flip-card-front">
                                <div class="flip"></div>
                            </div>
                            <div class="flip-card-back">
                                <h1>Chocolat Milk</h1>
                                <input class="price" id="item2" type="text" readonly>
                            </div>
                        </div>
                    </div>

                    <div class="flip-card">
                        <div class="flip-card-inner">
                            <div id="flip3" class="flip-card-front">
                                <div class="flip"></div>
                            </div>
                            <div class="flip-card-back">
                                <h1>Cappuchino</h1>
                                <input class="price" id="item3" type="text" readonly>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row2">
                    <div class="flip-card">
                        <div class="flip-card-inner">
                            <div id="flip4" class="flip-card-front">
                                <div class="flip"></div>
                            </div>
                            <div class="flip-card-back">
                                <h1>Coffee</h1>
                                <input class="price" id="item4" type="text" readonly>
                            </div>
                        </div>
                    </div>

                    <div class="flip-card">
                        <div class="flip-card-inner">
                            <div id="flip5" class="flip-card-front">
                                <div class="flip"></div>
                            </div>
                            <div class="flip-card-back">
                                <h1>Cookie 1</h1>
                                <input class="price" id="item5" type="text" readonly>
                            </div>
                        </div>
                    </div>

                    <div class="flip-card">
                        <div class="flip-card-inner">
                            <div id="flip6" class="flip-card-front">
                                <div class="flip"></div>
                            </div>
                            <div class="flip-card-back">
                                <h1>Cookie 2</h1>
                                <input class="price" id="item6" type="text" readonly>
                            </div>
                        </div>
                    </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>
    </div>
</body>