Question

我想问为什么$（this）在我的变更函数中没有工作？

我的目标是在单击复选框时隐藏输入。

$('#checkboxContactName').on('change', () => {
  if ($(this).prop('checked')) {
    console.log('is checked!');
    $(this).parent().next().css('display', 'none');
  } else {
    $(this).parent().next().css('display', 'block');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="form-group">
  <label class="control-label" for="#" title="Contact Name">Contact</label>
  <label class="checkbox-inline" style="float:right;"><input id="checkboxContactName" type="checkbox" /> Hide
  </label>
</div>

Answer 1

将箭头函数语法更改为函数声明或获取函数中的event参数，并使用event.currentTarget代替this。您不需要在箭头函数中保留外部上下文。 this必须引用jQuery绑定到它的上下文。

$('#checkboxContactName').on('change', function() {
     if($(this).prop('checked')) {
         console.log('is checked!');
         $(this).parent().next().css('display', 'none');
     } else {
         $(this).parent().next().css('display', 'inline-block');
     }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <label class="control-label" for="#" title="Contact Name">Contact</label>
    <label class="checkbox-inline" style="float:right;"  >
    <input id="checkboxContactName" type="checkbox"/> Hide
    </label>
    <input type="text">
</div>

Answer 2

试试这个。它会工作。您需要将箭头功能更改为普通功能

$('#checkboxContactName').on('change', function()  {
  if($(this).prop('checked')) {
    console.log('is checked!');
    $(this).parent().next().css('display', 'none');
  } else {
    $(this).parent().next().css('display', 'block');
  }
});

Answer 3

使用箭头功能时，您可以像这样访问元素：

$('#checkboxContactName').on('change', (ev) => {
   if(ev.target.checked) {
        console.log('is checked!');
    } else {
        console.log("unchecked")
    }
});

Jquery $（this）在'change'函数中没有工作

3 个答案: