更改变量值时，数据属性不会更改

Question

这不是重复的，因为我使用 .data()而不是像附件一样的 .attr()建议

更新变量时，我需要更改数据属性值。我正在做一个与折扣字段相关的下拉列表，我需要更新<option>标签中的文本和数据属性。

相关作品看起来像这样：

$(function() {
  $("#plan-options").change(function() {
    var moneyAmount = $(this).find('option:selected').data('amount');
    $("#selected-price").text("$" + moneyAmount);
    $("#purchase-warning").toggle();
    $(".default-encouragement").toggle();
  });
});

#plan-options是带有数据属性的<option>的<select>标签。

之后：

...
let selected = $("select option:selected");
let selectedAmount = selected.data("amount");
let selectedStr = selected.text();
let amountOffMoney = (data.amount_off / 100).toFixed(2);
if (data.percent_off != null) {
    selectedAmount = selectedAmount * (100 - data.percent_off) / 100
} else if (data.amount_off != null) {
    selectedAmount = selectedAmount - amountOffMoney;
    // this variable doesn't update - why?
    $("select option:selected").data("amount", selectedAmount);
} else {
    alert("Someting wrong happened!");
    return;
}

最相关的作品在这里：

selectedAmount = selectedAmount - amountOffMoney;
$("select option:selected").data("amount", selectedAmount);

我的期望是我为selectedAmount分配了一个新值，并且将数据属性更改为selectedAmount应该更改为新的分配，但这不会发生。该值保持不变。

是因为它是let吗？这是一个范围的问题吗？

完整代码段：

$(function() {
  $("#plan-options").change(function() {
    var moneyAmount = $(this).find('option:selected').data('amount');
    $("#selected-price").text("$" + moneyAmount);
    $("#purchase-warning").toggle();
    $(".default-encouragement").toggle();
  });
});
...
jQuery(function ($) {
          $(document).on("click",'.apply_coupon', function (e) {
            e.preventDefault();
            let plan = $('select[name="plan"]').val();
            let coupon = $('input[name="coupon"]').val();
            $.get('/premium/coupon/', {
              coupon: coupon,
              plan: plan
            }, function (data) {
              console.log("got data from calling coupon api:", data)
              if (data.success) {
                //discounted amount display handling
                let selected = $("select option:selected");
                let selectedAmount = selected.data("amount");
                let selectedStr = selected.text();
                let amountOffMoney = (data.amount_off / 100).toFixed(2);
                if (data.percent_off != null) {
                  selectedAmount = selectedAmount * (100 - data.percent_off) / 100
                } else if (data.amount_off != null) {
                  selectedAmount = selectedAmount - amountOffMoney;
                  console.log(selectedAmount);
                  $("#plan-options option:selected").data("amount", selectedAmount);
                } else {
                  alert("Someting wrong happened!");
                  return;
                }
                let regex = /d+.*d*/;
                let newStr = selectedStr.replace(regex, selectedAmount.toString());
                selected.text(newStr);
                $('.apply_coupon').text("Remove");
                $('.apply_coupon').addClass("remove_coupon").removeClass('apply_coupon');
                $('input[name="couponVerified"]').val(1);
                $('input[name="coupon"]').hide();
                $('.coupon-results').show();
                $('.coupon-results__code').text(data.name);
                $('.coupon-results__info').text("$" + amountOffMoney + " off " + data.duration);
                $("#selected-price").text("$" + selectedAmount);
              } else {
                alert(data.message);
              }
            })
          });
          $(document).on('click','.remove_coupon', function (e) {
            e.preventDefault();
            $.get('/premium/coupon/remove/', function (data) {
              if (data.success) {
                //discounted amount reverting handling
                let selected = $("select option:selected");
                let selectedAmount = selected.data("amount");
                let selectedStr = selected.text();
                let regex = /d+.*d*/;
                let newStr = selectedStr.replace(regex, selectedAmount.toString());
                selected.text(newStr);
                $('.remove_coupon').text("apply");
                $('.remove_coupon').addClass("apply_coupon").removeClass('remove_coupon');
                $('input[name="couponVerified"]').val(0);
                $('input[name="coupon"]').show();
                $('.coupon-results').hide();
                $("#selected-price").text("$" + selectedAmount);
              }
            });
          });
        });

Answer 1

看起来您正在指定变量data.amount_off和data.percent_off是undefined？我认为这些也应该是<option>标签上的data属性？以下摘要调用有关更改select框值的测试功能，以使用data属性触发您的值计算。请让我知道，如果你有任何问题。请注意，从$ 15.00 option切换返回默认的" select" option，然后返回到$ 15.00 option，每次都会更新data-amount值。

$(function() {
  $("#plan-options").change(function() {
    var moneyAmount = $(this).find('option:selected').data('amount');
    $("#selected-price").text("");
    $("#purchase-warning").toggle();
    $(".default-encouragement").toggle();
    // call code function below for testing
    if (moneyAmount > 0) {
      // Amount data attribute value on select
      console.log('current data-amount value: ' + moneyAmount);
      $("#selected-price").text("$" + moneyAmount);
      testDataAttr();
    }
  });
});
function testDataAttr() {
  let selected = $("#plan-options option:selected");
  let selectedAmount = selected.data("amount");
  let selectedAmountOff = selected.data("amount-off");
  let selectedPercentOff = selected.data("percent-off");
  let selectedStr = selected.text();
  let amountOffMoney = (selectedAmountOff / 100).toFixed(2);
  if (selectedPercentOff > 0) {
    selectedAmount = (selectedAmount * (100 - selectedPercentOff) / 100).toFixed(2);
  } else if (selectedAmountOff > 0) {
    selectedAmount = (selectedAmount - amountOffMoney).toFixed(2);
    $("#plan-options option:selected").data("amount", selectedAmount);
    // Log updated amount that was set on data-amount attr
    console.log('updated data-amount value: ' + selected.data("amount"));
  } else {
    alert("Someting wrong happened!");
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="plan-options">
  <option value="">-Select-</option>
  <option value="" data-amount="15.00" data-amount-off="5.00" data-percent-off="">15.00</option>
</select>
<div id="selected-price"></div>