每日、每周、每月套餐的价格选项

Question

我正在为我工作的公司创建用于食品配送的电子商务网站。
这不是简单的电子商务网站，我正在使用PHP OOP. 它就像包，充满了可定制的，而不是固定的。
这是图表： Food Plan 1是我们在管理面板中创建的包名称，每周、每天、每月是可自定义的选项，您可以看到每个选项的价格都有不同的价格。这就是这个概念。 现在，当用户单击按钮时，将出现问题表单，这是表单： 我希望我的价格（我已存储在数据库中）仅在用户单击并在下方单击午餐/早餐/晚餐时才会出现，然后是价格只为

choose package

dailylunch/breakfast/dinnerdaily选项。与单击 和weekly相同monthly。
这是数据库截图： 这里，是 for ，是 for和是 for 。这是我的代码：

ddailywweeklymmonthly

<?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>

那么，你能告诉我如何根据选择daily/weekly/monthly的显示价格lunch/dinner/breakfast吗？应该用 jQuery 还是 PHP 来完成？ 请帮我解决这个问题。

Answer 1

您需要在这里结合使用 PHP 和 Javascript。后端需要 PHP 以对象的形式从您的数据库中获取数据，如果选择了一个选项，则 Javascript 使用该对象在您的页面上显示价格。请注意，您需要进行 ajax 调用以将您的对象从 PHP 转换为 Javascript，这可以使用现代浏览器的XHR、jQuery.ajax()或Fetch API来完成。这是一个如何完成的示例：var validityButtons = document.getElementsByName('validity');var foodTimeButtons = document.getElementsByName('foodtime');var prices = {&nbsp; breakfast: {&nbsp; &nbsp; daily: 120,&nbsp; &nbsp; weekly: 110,&nbsp; &nbsp; monthly: 100&nbsp; },&nbsp; lunch: {&nbsp; &nbsp; daily: 150,&nbsp; &nbsp; weekly: 130,&nbsp; &nbsp; monthly: 120&nbsp; },&nbsp; dinner: {&nbsp; &nbsp; daily: 150,&nbsp; &nbsp; weekly: 130,&nbsp; &nbsp; monthly: 120&nbsp; },};function calculatePrice() {&nbsp; var price = 0;&nbsp; var currentOption;&nbsp; var showPrice = document.getElementById('price');&nbsp;&nbsp;&nbsp; /* Iterate through radio buttons to get the checked one */&nbsp; validityButtons.forEach(function(button) {&nbsp; &nbsp; if (button.checked === true) {&nbsp; &nbsp; &nbsp; &nbsp; currentOption = button.value;&nbsp; &nbsp; }&nbsp; });&nbsp;&nbsp;&nbsp; /* Iterate through checkboxes to calculate price depending on selected options */&nbsp; foodTimeButtons.forEach(function(button) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (button.checked) {&nbsp; &nbsp; &nbsp; &nbsp; switch(button.value) {&nbsp; &nbsp; &nbsp; &nbsp; case 'breakfast':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; price += prices.breakfast[currentOption];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case 'lunch':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; price += prices.lunch[currentOption];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case 'dinner':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; price += prices.dinner[currentOption];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; });&nbsp;&nbsp;&nbsp; /* Show price */&nbsp; showPrice.innerText = price;}/* Fire a function when radio button gets clicked */validityButtons.forEach(function(button) {&nbsp; &nbsp; &nbsp; &nbsp; button.addEventListener('change', calculatePrice);});/* Fire a function when checkboxes are clicked */foodTimeButtons.forEach(function(button) {&nbsp; &nbsp; &nbsp; &nbsp; button.addEventListener('change', calculatePrice);});/* Calculate the price based on selected options on page load */calculatePrice();Select your package validity:<label>&nbsp; <input type="radio" name="validity" value="daily" checked> Daily</label><label>&nbsp; <input type="radio" name="validity" value="weekly"> Weekly</label><label>&nbsp; <input type="radio" name="validity" value="monthly"> Monthly</label><br><br>Select your food time:<label>&nbsp; <input type="checkbox" name="foodtime" value="breakfast" checked> Breakfast</label><label>&nbsp; <input type="checkbox" name="foodtime" value="lunch"> Lunch</label><label>&nbsp; <input type="checkbox" name="foodtime" value="dinner"> Dinner</label><br><br>Your price: <strong id="price"></strong>