在函数内调用数据属性 jquery

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

您的代码无效，因为关键字 this 没有引用 select 元素上下文，而是引用文档。

你可以

1) 或者将点击元素的对象作为参数传递给函数。

在 js 中：

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

alert(this_plan_type);
}

2) 通过select或在测试方法中获取元素：

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

alert(this_plan_type);
}

3) 使用 jquery 将事件附加到 select 元素：

$(".mb10").change(function(){
   var $selectElement = $(this);
   var this_plan_type =$selectElement.data('plan-type');
   var this_plan_id = $selectElement.data('plan-id');
   var this_plan_day = $selectElement.data('plan-day');
   alert(this_plan_type);
});

Answer 2

您可以使用.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>

Answer 3

将 <select> 作为参数传递给 test() 并使用它代替 this（在您的情况下绑定到 window 对象）。

但老实说，您根本不应该使用 onchange 属性。 jQuery 的 change() 方法绝对可以完成工作，即使在 IE11 中也是如此。

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

    alert(this_plan_type);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="qty" class="mb10" onchange="test(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>

在函数内调用数据属性 jquery

Call data attribute inside function jquery

javascript

jquery

custom-data-attribute