मैं अभी भी jQuery के लिए नया हूं और मैं इस रेस्टोरेंट ऑर्डरिंग सिस्टम को बनाने की कोशिश कर रहा हूं। मैं इसे बनाने की कोशिश कर रहा हूं ताकि जब आप खाने के विकल्पों में से एक बटन पर क्लिक करें। यह नाम और भोजन की कीमत को एक अनियंत्रित सूची में जोड़ता है ताकि आप उस भोजन और कीमतों की एक सूची देख सकें जो आपने पक्ष में चुना था।

var coll = $(".collapsible");

for (var i = 0; i < coll.length; i++) {
    
  coll[i].addEventListener("click", function() {
    
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}


$(".button.table").click(function(){
    var price = $(this).attr("id");
    var name = $(this).attr("name");
    $(".orders li").html("<li>" + price + "</li>");
});
/* Splits Screen */
html, body { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
}

/* Choice section */
.choice { 
    width: 70%; 
    height: 100%; 
    float: left;
    padding: 0 25px 0 25px;
    background-color: gray;
}


/* Order List */
.order { 
    width: 30%; 
    height: 100%; 
    float: left;
}

h1{
    font-size: 50px;
    font-weight: 700;
    color: black;
    text-align: center;
}

#appetizer{
   width: 100%; 
}
#entree{
   width: 100%; 
}
#dessert{
   width: 100%; 
}
#drinks{
   width: 100%; 
}


.collapsible {
    background-color: lightgray;
    border-radius: 5px;
    border: 2px solid black;
    margin: 5px;
    color: black;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: center;
    outline: none;
    font-size: 30px;

  }
  
  .content {
    padding: 0;
    display: none;
    overflow: hidden;
    background-color: white;
  }

  .food{
      margin: auto;
      width: 100%;
      height: 55px;
      font-size: 20px;
  }

  ul li{
      list-style: none;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- BootStrap -->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
     <link rel="stylesheet" href="styles2.css">

    <title>Order</title>
</head>
<body>
    <div class="choice">
            <h1>Choices</h1>
            
               <button class="collapsible">Appetizers</button>
                <div class="content">
                    <button class="food" name="Wings" id="8">Wings</button>
                    <button class="food" name="Calamari" id="12">Calamari</button>
                    <button class="food" name="Cheese Dip" id="7">Cheese Dip</button>
                </div>

               <button class="collapsible">Entrees</button>
                <div class="content">
                    <button class="food">Wings</button>
                    <button class="food">Wings</button>
                    <button class="food">Wings</button>
                </div>

               <button class="collapsible">Desserts</button>
                <div class="content">
                    <button class="food">Wings</button>
                    <button class="food">Wings</button>
                    <button class="food">Wings</button>
                </div>
                
               <button class="collapsible">Drinks</button>
                <div class="content">
                    <button class="food">Wings</button>
                    <button class="food">Wings</button>
                    <button class="food">Wings</button>
                </div>
    </div>


    <div class="orderList">
            <h1>Order:</h1>
            <div class="list-group">
                <ul class= "orders">
                    <li></li>
                </ul>
            </div>
    </div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="tables.js"></script>
</body>
</html>
1
Matt 15 अप्रैल 2020, 05:55

1 उत्तर

सबसे बढ़िया उत्तर

मैं आपको कोड संपादित करता हूं और अब सही काम करता हूं लेकिन 1- आईडी एक संख्या नहीं है जिसे आप डेटा का उपयोग कर सकते हैं- जानकारी के लिए जैसे कीमत 2- jQuery के पास जल्द ही कमांड है और आप इसका उपयोग कर सकते हैं यदि आप jQuery लिखते हैं और शुद्ध जावास्क्रिप्ट नहीं उदाहरण के लिए आप इसे

for (var i = 0; i < coll.length; i++) {

  coll[i].addEventListener("click", function() {

    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

पर मैं ये लिखता हूँ

  $(".collapsible").click(function(){

    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });

3- Jquery में Selector बहुत जरूरी है कि आप इसे लिखें

$(".button.table")

आपके पास button वर्ग नहीं है और इस चयनकर्ता को कुछ भी वापस करने के लिए तालिका वर्ग नहीं है

    
 $(".collapsible").click(function(){
    
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });



$("button.food").click(function(){
    var price = $(this).attr("data-price");
    var name = $(this).attr("name");
    $(".orders").append("<li>" +name+":"+ price + "</li>");
});
/* Splits Screen */
html, body { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
}

/* Choice section */
.choice { 
    width: 70%; 
    height: 100%; 
    float: left;
    padding: 0 25px 0 25px;
    background-color: gray;
}


/* Order List */
.order { 
    width: 30%; 
    height: 100%; 
    float: left;
}

h1{
    font-size: 50px;
    font-weight: 700;
    color: black;
    text-align: center;
}

#appetizer{
   width: 100%; 
}
#entree{
   width: 100%; 
}
#dessert{
   width: 100%; 
}
#drinks{
   width: 100%; 
}


.collapsible {
    background-color: lightgray;
    border-radius: 5px;
    border: 2px solid black;
    margin: 5px;
    color: black;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: center;
    outline: none;
    font-size: 30px;

  }
  
  .content {
    padding: 0;
    display: none;
    overflow: hidden;
    background-color: white;
  }

  .food{
      margin: auto;
      width: 100%;
      height: 55px;
      font-size: 20px;
  }

  ul li{
      list-style: none;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- BootStrap -->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
     <link rel="stylesheet" href="styles2.css">

    <title>Order</title>
</head>
<body>
    <div class="choice">
            <h1>Choices</h1>
            
               <button class="collapsible">Appetizers</button>
                <div class="content">
                    <button class="food" name="Wings" data-price="8">Wings</button>
                    <button class="food" name="Calamari" data-price="12">Calamari</button>
                    <button class="food" name="Cheese Dip" data-price="7">Cheese Dip</button>
                </div>

               <button class="collapsible">Entrees</button>
                <div class="content">
                    <button class="food">Wings</button>
                    <button class="food">Wings</button>
                    <button class="food">Wings</button>
                </div>

               <button class="collapsible">Desserts</button>
                <div class="content">
                    <button class="food">Wings</button>
                    <button class="food">Wings</button>
                    <button class="food">Wings</button>
                </div>
                
               <button class="collapsible">Drinks</button>
                <div class="content">
                    <button class="food">Wings</button>
                    <button class="food">Wings</button>
                    <button class="food">Wings</button>
                </div>
    </div>


    <div class="orderList">
            <h1>Order:</h1>
            <div class="list-group">
                <ul class= "orders">
                 
                </ul>
            </div>
    </div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="tables.js"></script>
</body>
</html>
2
MBadrian 15 अप्रैल 2020, 03:47