JohnSnow

Well-known member
  • Mar 17, 2017
    8,697
    13,244
    113
    මචන්ලා හෙල්ප් එකක් ඕන. මට ඕන සයිස් එක සිලෙක්ට් කරම ප්‍රයිස් එක එ අනුව චෙන්ග් වෙන්න. කොහොමද මේක JS වලින් කරන්නෙ කියලා අයිඩියා එකක් දෙන්න පුලුවන්ද? :)


    Screenshot 2022-10-11 194749.png


    PHP:
    <?php
    
    $pizza = array(
        array("img/pizza01.png", "Chicken Pizza", "tomato sauce, mozzarella cheese, cocktail, shrimps salmon, mussels, lemon, parsley", "S", "M", "L", 900, 1600, 2500),
        array("img/pizza02.png", "Seafood Pizza", "tomato sauce, mozzarella cheese, cocktail, shrimps salmon, mussels, lemon, parsley", "S", "M", "L", 1100, 1900, 2700),
        array("img/pizza03.png", "Mix Pizza", "tomato sauce, mozzarella cheese, cocktail, shrimps salmon, mussels, lemon, parsley", "S", "M", "L", 1500, 2200, 3700),
        array("img/pizza04.png", "Cheese Pizza", "tomato sauce, mozzarella cheese, cocktail, shrimps salmon, mussels, lemon, parsley", "S", "M", "L", 700, 1200, 2300),
        array("img/pizza05.png", "Chicken Pizza", "tomato sauce, mozzarella cheese, cocktail, shrimps salmon, mussels, lemon, parsley", "S", "M", "L", 900, 1600, 2500),
        array("img/pizza06.png", "Seafood Pizza", "tomato sauce, mozzarella cheese, cocktail, shrimps salmon, mussels, lemon, parsley", "S", "M", "L", 1100, 1900, 2700),
        array("img/pizza07.png", "Mix Pizza", "tomato sauce, mozzarella cheese, cocktail, shrimps salmon, mussels, lemon, parsley", "S", "M", "L", 1500, 2200, 3700),
        array("img/pizza08.png", "Cheese Pizza", "tomato sauce, mozzarella cheese, cocktail, shrimps salmon, mussels, lemon, parsley", "S", "M", "L", 700, 1200, 2300),
        array("img/pizza09.png", "Chicken Pizza", "tomato sauce, mozzarella cheese, cocktail, shrimps salmon, mussels, lemon, parsley", "S", "M", "L", 900, 1600, 2500),
        array("img/pizza10.png", "Seafood Pizza", "tomato sauce, mozzarella cheese, cocktail, shrimps salmon, mussels, lemon, parsley", "S", "M", "L", 1100, 1900, 2700),
        array("img/pizza11.png", "Mix Pizza", "tomato sauce, mozzarella cheese, cocktail, shrimps salmon, mussels, lemon, parsley", "S", "M", "L", 1500, 2200, 3700),
        array("img/pizza12.png", "Cheese Pizza", "tomato sauce, mozzarella cheese, cocktail, shrimps salmon, mussels, lemon, parsley", "S", "M", "L", 700, 1200, 2300),
    );
    
    ?>

    HTML:
                        <div id="pizza" class="tab-content">
                            <div class="item-box-one">
                                <div class="box-container">
    
                                <?php for ($i = 0; $i < 4; $i++) {?>
                                    <div class="box">
                                        <img src="<?php echo $pizza[$i][0]; ?>" alt=""/>
                                        <h3><?php echo $pizza[$i][1]; ?></h3>
                                        <p><?php echo $pizza[$i][2]; ?></p>
                                        <div class="size" id="size" data-value="">
                                            <div class="btn-size">
                                                <button class="btn btn-active" onclick="openSize(event,'s')"><?php echo $pizza[$i][3]; ?></button>
                                                <button class="btn" onclick="openSize(event,'m')"><?php echo $pizza[$i][4]; ?></button>
                                                <button class="btn" onclick="openSize(event,'l')"><?php echo $pizza[$i][5]; ?></button>
                                            </div>
                                            <div class="price">
                                                <h2 id="s" class="pi-size-price">Rs: <?php echo $pizza[$i][6]; ?></h2>
                                                <h2 id="m" class="pi-size-price">Rs: <?php echo $pizza[$i][7]; ?></h2>
                                                <h2 id="l" class="pi-size-price">Rs: <?php echo $pizza[$i][8]; ?></h2>
                                            </div>
                                        </div>
                                        <button>ADD TO CART</button>
                                    </div>
                                    <?php }?>
     
    Last edited:

    JohnSnow

    Well-known member
  • Mar 17, 2017
    8,697
    13,244
    113
    මේ openSize function ඒක define කරලා තියෙන්නෙ කොහෙද බන්?
    JavaScript:
    function openSize(event, pizzaName) {
     
      var i, x, btns;
    
      x = document.getElementsByClassName("pi-size-price");
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
     
      btns = document.getElementsByClassName("btn");
      for (i = 0; i < x.length; i++) {
        btns[i].className = btns[i].className.replace(" btn-active", "");
      }
      document.getElementById(pizzaName).style.display = "block";
      event.currentTarget.className += " btn-active";
    }

    ඔතන එක බොක්ස් එකකට function define කරලා බැලුවේ. ඒත් මට ඕන මන් ඇඩ් කරන ඕනම බොක්ස් ගානකට අනුව මේ function එක වැඩ කරන්න.
     
    • Like
    Reactions: RottenCOLT

    nkt

    Well-known member
  • Aug 11, 2015
    4,286
    4,129
    113
    ඔය pizza box div වලට id දෙන්න, ඊක pass කරන්න openSize එකට, එතනින් ඒ id එකට div එක අරන් එක ඇතුලේ තියෙන price එක change කරන්න