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

bind()方法创建一个新函数，在调用时，将其this关键字设置为提供的值，

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 2

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

你可以

1）将clicked元素的对象作为参数传递给函数。

和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）在测试方法中按选择器获取元素：

 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 3

将<select>作为参数传递给test()，然后使用this而不是window（在您的情况下绑定到onchange对象）。

但老实说，你根本不应该使用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); }属性。即使在IE11中，jQuery的change()方法也绝对可以完成这项工作。

＆＃13;

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

＆＃13;

while

＆＃13;

在函数jquery中调用数据属性

3 个答案: