javascript - var 和 function 以错误的顺序工作

Question

我试图用下面的代码实现的是，当单击生成按钮并且检查 html 变量时，然后执行某些操作 - 在这种情况下加载警报，但是从这个 fiddle 你可以看到它以完全相反的方式工作。

为什么要这样做？我该如何解决它才能按照我想要的方式工作 - 你可以看到我也必须为另一个复选框执行此操作:)

HTML:

    <div class="form-group formGroup10">
            <div class="checkbox">
                <label><input id="html" type="checkbox" value="">
                <strong>Download as a HTML file</strong></label>
                <br/>
            <label><input id="showInline" type="checkbox" value="">
            <strong>Show as HTML Code</strong></label>
            </div>
            <br/>
            <button type="button" id="generate" class="btn btn-primary formButton10">Generate</button>
        </div>

JS:

var html     = $('#showInline');
    var file     = $('#html');

    $("#generate").click(function(){
        html.change(function(){
        if($(this).is(':checked'))
        {
            alert('hello');
        }

        });
    });

Answer 1

不需要有更改事件。您可以将其删除以进行工作。

使用这种方式:

$("#generate").click(function(){
    //html.change(function(){
    if(html.is(':checked'))
    {
        alert('hello');
    }

    //});
});

你在做什么:

您正在click 事件中绑定(bind)change 事件。因此，当您第一次单击它时，它会在 html 上注册更改事件。

<小时/>

我也必须为另一个复选框执行此操作

为此，您可以将其简化为:

$("#generate").click(function(){
    if($(this).closest('.form-group').find('input[type="checkbox"]:checked').attr('id') === "showInline")
    {
        alert('showInline');
    }else{
        alert('html');
    }
});