Jquery 基于单独表单元素上的更改更新按钮数据属性

我在一个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>

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

---

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

on.change/input

？

有点混乱。。你能举个例子吗？你想在这里有一个组合吗？我已经编辑了描述，希望能让它更清楚一点。这有帮助吗？你为什么不在（'change'）上写

$（“#options”）

并且在本次事件中具有相同的更新按钮逻辑？更改

选择将更改价格组，但更改单选按钮将更改订阅长度，因此最终结果基于两个单独元素的选择，我不确定如何解释这两个因素。您的目标是什么？你的意思是根据选项来定价吗？
<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>

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