javascript - 在函数 jquery 中调用 data 属性

Question

我有一些像这样的下拉列表:

<select name="qty" class="mb10" onchange="test()" data-plan-type="offer" data-plan-id="7395" data-plan-day="2210009">
    <option value="0">0 rooms</option>
    <option value="1">1 rooms</option>
    <option value="2">2 rooms</option>
    <option value="3">3 rooms</option>
    <option value="4">4 rooms</option>
</select>

这是我用 onchange 调用的函数事件:

function test()
{
    var this_plan_type = $(this).data('plan-type');
    var this_plan_id = $(this).data('plan-id');
    var this_plan_day = $(this).data('plan-day');

    alert(this_plan_type);
}

问题出在 onchange事件我无法在我的 <select> 中调用数据属性 。我如何在函数内调用该数据属性？

Answer 1

您可以使用.bind()

The bind() method creates a new function that, when called, has its this keyword set to the provided value,

<select name="qty" class="mb10" onchange="test.bind(this)()" data-plan-type="offer" data-plan-id="7395" data-plan-day="2210009">
</select>

function test() {
  var this_plan_type = $(this).data('plan-type');
  var this_plan_id = $(this).data('plan-id');
  var this_plan_day = $(this).data('plan-day');
  console.clear();
  console.log(this_plan_type, this_plan_id, this_plan_day);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="qty" class="mb10" onchange="test.bind(this)()" data-plan-type="offer" data-plan-id="7395" data-plan-day="2210009">
    <option value="0">0 rooms</option>
    <option value="1">1 rooms</option>
    <option value="2">2 rooms</option>
    <option value="3">3 rooms</option>
    <option value="4">4 rooms</option>
</select>