Question

我使用joomla并在我的文章上使用模板覆盖来显示交易。交易存储在sql数据库中，因此我使用php检索存储的信息。见下文：

$query->clear();
$query->select('*');
$query->from($db->quoteName('#__deal_option'));
$query->where($db->quoteName('deal_id')." = ".$cmgbstore_id ." AND (". $db->quoteName('option_id')." = 1 OR 2 OR 3)");

$db->setQuery($query);
$db->execute();
$num_rows = $db->getNumRows();

这些交易有多个选项，所以我使用以下方法检索交易：

$row = $db->loadRowList();
$opt1_id = $row['0']['2'];
$opt1_o_price = $row['0']['4'];
$opt1_d_price = $row['0']['5'];
$opt1_title = $row['0']['3'];
$opt1_save = $opt1_o_price-$opt1_d_price;

相同的代码用于通过更改行来检索其他选项，并将其存储到相同的变量但数量更改，例如。选项二的ID将存储在$opt2_id。

我的问题是我需要用户能够选择他们想要的选项并在网站上动态更新，而无需使用提交按钮。基本上，当选择该选项时，价格会自动更新。

为了解决这个问题，我使用了一个无线电盒选择。请参阅以下代码：

<div class="product-options-contain">
    <?php
    if ($num_rows >= '1') {
    ?>
    <div class="product-options">
        <div class="option-input">
            <input type="radio" value= "1" name="product-option" class="radio" checked="checked">
        </div>
        <label class="option-detail">
            <span class="option-title"><?php echo $opt1_title ?></span>
            <span class="option-price">R<?php echo $opt1_o_price ?></span>
            <span class="option-was-price">R<?php echo $opt1_d_price ?></span>
            <span class="option-discount">Save R<?php echo $opt1_save .'.00'?></span>
            <span class="option-bought">Over 31 bought</span>
        </label>
    </div>
    <?php   
    }
    ?>
    <?php   
    if ($num_rows >= '2') {
    ?>
    <div class="product-options">
        <div class="option-input">
            <input type="radio" value= "2" name="product-option" class="radio">
        </div>
        <label class="option-detail">
            <span class="option-title"><?php echo $opt2_title ?></span>
            <span class="option-price">R<?php echo $opt2_o_price ?></span>
            <span class="option-was-price">R<?php echo $opt2_d_price ?></span>
            <span class="option-discount">Save R<?php echo $opt2_save .'.00'?></span>
            <span class="option-bought">Over 31 bought</span>
        </label>
    </div>
    <?php   
    }
    ?>                                  
    <?php   
    if ($num_rows >= '3') { ?>
    <div class="product-options">
        <div class="option-input">
            <input type="radio" value= "3" name="product-option" class="radio">
        </div>
        <label class="option-detail">
            <span class="option-title"><?php echo $opt3_title ?></span>
            <span class="option-price">R<?php echo $opt3_o_price ?></span>
            <span class="option-was-price">R<?php echo $opt3_d_price ?></span>
            <span class="option-discount">Save R<?php echo $opt3_save .'.00'?></span>
            <span class="option-bought">Over 31 bought</span>
        </label>
    </div>
    <?php   
    }
    ?>
</div>

如您所见，该选项仅在选项存在时才可见。我现在所处的位置是检索单选按钮中选择的值。

我有一个脚本，它允许我通过警报查看所选选项的值：

<script type="text/javascript">
    function getval(sel)
    {
        alert(sel.value);
    }
</script>

但我不需要警报，我需要一个值。我需要能够使用该值动态更改显示的信息。我猜我需要AJAX来完成这个，但我尝试了很多不同的组合，但似乎没有任何工作。

我找到了一个符合相同原则的脚本，但我不知道如何在我的代码中实现它。

$(function () {
    $('.product-options input:first').attr('checked', 'checked');
})

$(document).on('change', '.product-options input', function () {
    var productId = $(this).attr('data-productId');
    var price = $(this).attr('data-price')
    var discount = $(this).attr('data-discount')
    var save = $(this).attr('data-save')
    $('[data-id]').attr('data-id', productId);
    $('.savings .value.selling-price .value-amount').html(price);
    $('.savings .value.discount .value-amount').html(discount);
    $('.savings .value.save .value-amount').html(save);
})

说实话，我甚至不知道它是如何运作的。

我真的需要帮助，非常感谢任何帮助。

Answer 1

由于看起来你正在计算后端的所有内容，所以你只需将属性放在每个无线电的数据字段中。以下是静态值的示例。

以下是演示：https://jsfiddle.net/nbucona8/2/

希望这就是你要找的东西：

<div class="product-options">
  <div class="option-input">
    <input type="radio" value= "1" name="product-option" class="radio item" data-sku="1001" data-price="100" data-discount="20" data-save="20" data-after="80" />
  </div>
  <label class="option-detail">
    <span class="option-title">Item Title One</span>
    <span class="option-price">R100</span>
    <span class="option-was-price">R80</span>
    <span class="option-discount">Save R20</span>
    <span class="option-bought">Over 31 bought</span>
  </label>
</div>

<div class="product-options">
  <div class="option-input">
    <input type="radio" value= "2" name="product-option" class="radio item" data-sku="1002" data-price="200" data-discount="25" data-save="25" data-after="150"  />
  </div>
  <label class="option-detail">
    <span class="option-title">Item Title Two</span>
    <span class="option-price">R200</span>
    <span class="option-was-price">R150</span>
    <span class="option-discount">Save R50</span>
    <span class="option-bought">Over 31 bought</span>
  </label>
</div>

<input type="hidden" name="sku" value="" />
<div id="pricing"></div>
<div id="savings"></div>
<div id="discount"></div>

<script>
$(function(){
    $('.item').on('change',function(){
        $('#pricing').text('R'+($(this).data('price')));
        $('#savings').text('R'+($(this).data('after')));
        $('#discount').text(($(this).data('discount'))+'% OFF');
        $('input[name=sku]').val($(this).data('sku'));
    });
});
</script>

动态获取单选按钮结果

1 个答案: