jQuery 將數據屬性傳遞給函數

Question

我使用我的 HTML 元素將數據屬性傳遞給 jQuery，但我似乎無法使用該數據屬性作為函數中的一個選項：

代替

    var options1 = {
        series: [60, 10, 30],

我正在嘗試使用

    <div id="evaluation" class="donut" data-series="60,10,30">

    autoValues = $('#evaluation').attr('data-series');
    const evaluation = [autoValues];

    var options1 = {
        series: evaluation,
        ...
</script>

這將返回 NaN 錯誤。

Answer 1

屬性值是一個字符串。 您需要拆分字符串並解析它們以創建整數列表。

您還可以使用.data() jQuery 方法來訪問data屬性。

 autoValues = $('#evaluation').data('series'); const evaluation = autoValues.split(',').map(Number); var options1 = { series: evaluation, }; console.log(options1);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="evaluation" class="donut" data-series="60,10,30">

Answer 2

數據屬性是字符串，因此您必須將該字符串轉換為數字。
如果您將數據屬性指定為 json，jQuery 的.data()可以將您的數據屬性解析為數據類型

 const evaluation = $('#evaluation').data('series'); var options1 = { series: evaluation, } console.log(options1);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="evaluation" class="donut" data-series="[60,10,30]">

Answer 3

數據屬性本質上只是字符串。 因此， evaluation = [autoValues]實際上與evaluation = ["60,10,30"] 。

但是，您可能希望將 JSON 存儲在您的數據屬性中，因為如果您使用data()函數，即$('#evaluation').data('series') ， jQuery 將自動嘗試為您JSON.parse它們。

 const options = { series: $('#evaluation').data('series') }; console.log(options);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="evaluation" class="donut" data-series="[60,10,30]">

使用這種方法，您甚至可以將整個選項對象存儲在單個數據屬性中：

 const options = $('#evaluation').data('options'); console.log(options);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="evaluation" class="donut" data-options='{"series": [60,10,30]}'>