Jquery $（this）在'change'函数里面不工作

Question

我想问为什么$（this）不能在我的on函数中工作？

我的目标是隐藏输入，如果复选框被点击。

$('#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

试试这个。它会工作。您需要使用箭头功能箭头功能更改为纯函数

$('#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 2

改变箭头功能语法到函数声明或函数来获取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 3

，您可以访问这样的元素：）

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