is(':checked')/this.checked不工作

Question

在发帖前尝试了几种解决方案，但似乎都不起作用，我肯定是做错了什么。

我的代码如下(简化)

<label>
    <input type="checkbox" id="menu-image-settings-container" value="1" name="..." checked="checked">
    Add image?
</label>

<div class="image-settings">show content if checked</div>

js代码

$( ".image-settings" ).hide();

var wrapper = $(this).closest('li.menu-item');      

if ( $('input#menu-image-settings-container').is(':checked') ) {
    wrapper.find('.image-settings').show();
    console.log('is-checked');
} else {
    wrapper.find('.image-settings').hide();
    console.log('is-not-checked');
}


$('input#menu-image-settings-container').change(function(){
    if(this.checked) {
        wrapper.find('.image-settings').show();
    } else {
        wrapper.find('.image-settings').hide();
    }
}); 

console.log说的是is-not-checked，而它显然在源代码中。我尝试过使用if ($('input#menu-image-settings-container').is(':checked')) {...}，但它也不起作用，而通常情况下，它应该也能起作用。

Answer 1

首先，is(':checked')是一个正确的解决方案。原因如下：https://stackoverflow.com/a/7672031/9145243，您可以在这部分代码中看到您的console.log是有效的。

实际的问题在于这个结构：wrapper.find('.image-settings').hide();这段代码就是找不到你的.image-settings元素。

我用$('.image-settings')替换了它，只是为了向您表明问题就在这里。

$('input#menu-image-settings-container').change(function() {
    if($(this).is(':checked')) {
        $('.image-settings').show();
    } else {
        $('.image-settings').hide();
    }
}); 

在调试代码时，一种很好的做法是始终逐行使用console.log。然后你就会清楚地看到你的问题所在