javascript - 动态获取单选按钮结果

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

由于看起来您在后端计算所有内容，因此您只需将属性放在每个 radio 的数据字段中即可。下面是一个静态值的例子。

这是一个演示: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>