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