Question

我正在尝试显示div#options_holder并使用此代码在其中创建一些元素：

var counter = 1;

$('#choices').on("change", ":checkbox", function(e) {
    var theName = $(this).attr('name');
    var theID = $(this).attr('id');
    var isChecked = $(this).prop("checked");
    var input, button, append = "";

    $("#options_holder").show();

    input = capitalize(theName) + '<input name="input_' + theName + '[]" id="' + theID + '" value="" placeholder="' + capitalize(theName) + '" />';
    button = '<button type="button" class="add-size">Nuevo ' + capitalize(theName) + '</button>';

    append = counter === 1 ? input += button : input;

    $("#options_holder").append(append);
    counter++;

    console.log("You changed " + theName + ", with an id of " + theID + ", its checked property is: " + isChecked);
});

但它不起作用，因为div#options_holder仍然隐藏且元素未创建，是不是错了？我认为那些应该在我标记一个复选框时发生，如果我在另一方面取消标记该过程应该被恢复，则隐藏div#options_holder将被隐藏，并且其中的任何元素都应该被销毁，这是错的？

Answer 1

确保您的选择器工作且ID正确通常很容易被忽视。很高兴我们可以帮你找到你输入的错误： - ）

工作代码小提琴：http://jsfiddle.net/pXJpr/

HTML：

<div id="choices">
    <input type="checkbox" name="testName" id="testId" />
</div>
<div id="options_holder" style="display:none;">
</div>

JS：

var counter = 1;

$('#choices').on("change", ":checkbox", function(e) {
    var theName = $(this).attr('name');
    var theID = $(this).attr('id');
    var isChecked = $(this).prop("checked");
    var input, button, append = "";

    $("#options_holder").show();

    input = capitalize(theName) + '<input name="input_' + theName + '[]" id="' + theID + '" value="" placeholder="' + capitalize(theName) + '" />';
    button = '<button type="button" class="add-size">Nuevo ' + capitalize(theName) + '</button>';

    append = counter === 1 ? input += button : input;

    $("#options_holder").append(append);
    counter++;

    console.log("You changed " + theName + ", with an id of " + theID + ", its checked property is: " + isChecked);
});

function capitalize(s) {
    return s;
}

选中复选框时，显示div并创建元素

1 个答案: