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 code

$( ".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

首先，是（'：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是一个好习惯。然后你会清楚地看到你究竟在哪里遇到问题

是（＆＃39;：已检查＆＃39;）/ this.checked无效

1 个答案: