Question

我正在使用Snipcart网站，其中.button元素的价格数据属性会根据所选的单选按钮进行更新。

目前我的工作正常如下：

HTML

<fieldset class="pill-container">
<legend>Choose your length of subscription</legend>
<label for="sub_length-3">
  <input type="radio" 
    name="sub_length" 
    id="sub_length-3" 
    value="3" 
    data-price="35" 
    data-total="105">
  <span>3 months</span>
</label>
<label for="sub_length-6">
  <input type="radio" 
    name="sub_length" 
    id="sub_length-6" 
    value="6" 
    data-price="33" 
    data-total="198">
  <span>6 months</span>
</label>
<label for="sub_length-12">
  <input type="radio" 
    name="sub_length" 
    id="sub_length-12" 
    value="12" 
    data-price="31" 
    data-total="372">
  <span>12 months</span>
</label>
</fieldset>

<span class="price">$<b>35</b></span>

<a href="#" 
  class="button" 
  data-item-id="XXXXX-3" 
  data-item-name="Name" 
  data-item-price="105" 
  data-item-description="3 months subscription">Add to cart</a>

JS

<script>
$("[name=sub_length]").on("change", function(){
  var sub_length = $(this).val();
  var description = sub_length + " months subscription";
  var price       = $(this).data("price");
  var total       = $(this).data("total");
  var currentID   = $(".button").data("item-id");
  var id          = currentID.substring(0, currentID.indexOf("-"));
      id          = id + "-" + sub_length;
  $(".button")
    .data("item-description",description)
    .data("item-price",total)
    .data("item-id",id);
  console.log("Description: "+$(".button").data("item-description"));
  console.log("Total: "+$(".button").data("item-price"));
  console.log("ID: "+$(".button").data("item-id"));
  $(".price b").html(price);
});
</script>

因此，当您更改单选按钮时，data-item-price上的.button会更新，当您单击该按钮时，该值将被添加到购物车（这是Snipcart的工作方式）。< / p>

但现在我必须引入另一个选择元素，它引入了不同的价格，这些价格在更改时会动态更新价格。

目前，三个订阅价格在交付给模板之前设置为服务器端。现在，这三个价格可以根据下面的下拉值来改变。

我以为我需要再次使用数据属性做一些事情：

<select name="options" id="options">
<option value="">Please choose…</option>
<option 
  value="Option 1" 
  data-price_3="35" 
  data-price_6="33" 
  data-price_12="31">Option 1</option>
<option 
  value="Option 2" 
  data-price_3="25" 
  data-price_6="23" 
  data-price_12="21">Option 2</option>
</select>

但我不确定将我已有的新组合元素与最新方法相结合的最佳方法。

我是否可以让one元素更改另一个元素的数据属性，并让脚本侦听静默更新以及on.change/input？

根据单独表单元素

0 个答案: