每日，每周，每月套餐的價格選項

Question

我正在為我工​​作的公司創建一個用於食品配送的電子商務網站。
這不是一個簡單的電子商務網站，我正在用PHP OOP定制它。 就像包一樣，充滿了可定制的內容，而不是固定的。
這是圖形：
食物計划1是我們在管理面板中創建的套餐名稱，每周，每天，每月是可自定義的選項，您可以看到的每個選項的價格都有不同的價格。 這就是概念。
現在，當用戶單擊“ choose package按鈕時，將出現“問題”表單， 以下是該表單：

我想，我的價格（我已經存儲在數據庫中）才會出現當用戶點擊daily和下方點擊午餐/早餐/晚餐則價格lunch/breakfast/dinner只為daily的選擇。 和單擊weekly和monthly 。
這是數據庫截圖：
在這里， d是daily ， w是weekly ， m是monthly 。
這是我的代碼：

<?php

    $getPlanById = $plan->getPlanById($proId);
    if($getPlanById){
        $result = $getPlanById->fetch_assoc();
            $m_breakfast_price = $result['m_breakfast_price'];
            $m_lunch_price = $result['m_lunch_price'];
            $m_dinner_price = $result['m_dinner_price'];
            $w_breakfast_price = $result['w_breakfast_price'];
            $w_lunch_price = $result['w_lunch_price'];
            $w_dinner_price = $result['w_dinner_price'];
            $d_breakfast_pric = $result['d_breakfast_price'];
            $d_lunch_price = $result['d_lunch_price'];
            $d_dinner_price = $result['d_dinner_price'];

?>

    <div class="col-md-6 offset-md-3">
        <h2 class="h2-responsive font-weight-bold mt-5 mb-0">You've choosed <span class="text-primary border-bottom border-primary"><?php echo $result['pro_name']; ?></span> package.</h2>
        <label>Rs./<?php echo $result['m_breakfast_price']; ?></label>
    </div>

<?php } ?>

<div class="select_package_validity">
    <h5 class="h5-responsive font-weight-bold">1. Select your package validity.</h5>
    <input type="radio" class="custom-control-input plan_name" id="daily" name="plan_name_selector" value="Daily">
    <input type="radio" class="custom-control-input plan_name" id="weekly" name="plan_name_selector" value="Weekly">
    <input type="radio" class="custom-control-input plan_name" id="monthly" name="plan_name_selector" value="Monthly">
    <input type="hidden" name="plan_name" class="form-control ml-4 mt-2 w-50 selected_plan_name" />
</div>
<div class="select_days mt-4">
    <h5 class="h5-responsive font-weight-bold q2_text">2. How many days you need service in a week?</h5>
    <input type="radio" class="custom-control-input plan_days" id="5" name="plan_days_selector" value="5">
    <input type="radio" class="custom-control-input plan_days" id="6" name="plan_days_selector" value="6">
    <input type="radio" class="custom-control-input plan_days" id="7" name="plan_days_selector" value="7">
    <input type="hidden" name="plan_days" class="form-control ml-4 mt-2 w-50 selected_plan_days" />
</div>
<div class="days_names mt-4">
    <h5 class="h5-responsive font-weight-bold q3_text mb-2">3. Select the days.</h5>
    <input type="checkbox" class="custom-control-input" id="monday" name="day_name_selector" value="Monday">
    <input type="checkbox" class="custom-control-input" id="tuesday" name="day_name_selector" value="Tuesday">
    <input type="checkbox" class="custom-control-input" id="wednesday" name="day_name_selector" value="Wednesday">
    <input type="checkbox" class="custom-control-input" id="thursday" name="day_name_selector" value="Thursday">
    <input type="checkbox" class="custom-control-input" id="friday" name="day_name_selector" value="Friday">
    <input type="checkbox" class="custom-control-input" id="saturday" name="day_name_selector" value="Saturday">
    <input type="checkbox" class="custom-control-input" id="sunday" name="day_name_selector" value="Sunday">
</div>
<input type="hidden" class="form-control selected_days_names" name="days_names" />
</div>
<div class="food_time">
    <h5 class="h5-responsive font-weight-bold">4. Select your food time</h5>
    <input type="checkbox" class="custom-control-input" id="breakfast" name="food_time_selector" value="Breakfast">
    <input type="checkbox" class="custom-control-input" id="lunch" name="food_time_selector" value="Lunch">
    <input type="checkbox" class="custom-control-input" id="dinner" name="food_time_selector" value="Dinner">
    <input type="hidden" class="form-control selected_food_time" name="food_time" />
</div>
<div class="plan_date_time">
    <h5 class="h5-responsive font-weight-bold">5. When you want to start your package?</h5>
    <input type="text" class="form-control startsfromdatetime" name="starts_from" placeholder="Select date..." />
</div>

因此，您能告訴我如何根據所選的daily/weekly/monthly與lunch/dinner/breakfast顯示價格嗎？ 應該使用jQuery還是PHP？ 請幫助我 。

Answer 1

您需要在此處結合使用PHP和Javascript。 后端需要PHP才能以對象的形式從數據庫中獲取數據，然后如果選擇了某個選項，則Javascript會使用PHP在頁面上顯示價格。

請注意，您需要進行ajax調用，才能將對象從PHP轉換為Javascript，這可以使用XHR ， jQuery.ajax（）或Fetch API（針對現代瀏覽器）完成。

這是一個如何完成的示例：

 var validityButtons = document.getElementsByName('validity'); var foodTimeButtons = document.getElementsByName('foodtime'); var prices = { breakfast: { daily: 120, weekly: 110, monthly: 100 }, lunch: { daily: 150, weekly: 130, monthly: 120 }, dinner: { daily: 150, weekly: 130, monthly: 120 }, }; function calculatePrice() { var price = 0; var currentOption; var showPrice = document.getElementById('price'); /* Iterate through radio buttons to get the checked one */ validityButtons.forEach(function(button) { if (button.checked === true) { currentOption = button.value; } }); /* Iterate through checkboxes to calculate price depending on selected options */ foodTimeButtons.forEach(function(button) { if (button.checked) { switch(button.value) { case 'breakfast': price += prices.breakfast[currentOption]; break; case 'lunch': price += prices.lunch[currentOption]; break; case 'dinner': price += prices.dinner[currentOption]; break; default: break; } } }); /* Show price */ showPrice.innerText = price; } /* Fire a function when radio button gets clicked */ validityButtons.forEach(function(button) { button.addEventListener('change', calculatePrice); }); /* Fire a function when checkboxes are clicked */ foodTimeButtons.forEach(function(button) { button.addEventListener('change', calculatePrice); }); /* Calculate the price based on selected options on page load */ calculatePrice(); 

 Select your package validity: <label> <input type="radio" name="validity" value="daily" checked> Daily </label> <label> <input type="radio" name="validity" value="weekly"> Weekly </label> <label> <input type="radio" name="validity" value="monthly"> Monthly </label> <br><br> Select your food time: <label> <input type="checkbox" name="foodtime" value="breakfast" checked> Breakfast </label> <label> <input type="checkbox" name="foodtime" value="lunch"> Lunch </label> <label> <input type="checkbox" name="foodtime" value="dinner"> Dinner </label> <br><br> Your price: <strong id="price"></strong>