Question

我正在使用jQuery在Chrome扩展程序中创建一组组合按钮：

for( var i = 0, format; format = phoneFormats[i]; ++i ) {
    var input = $('<input>', {
        style: 'width: 400',
        type: 'radio',
        name: 'phone-format-radio',
        value: i,
        text: GetDisplayNumber( format )
    }).after( '<br/>' );

    $(id + ' > button').before( input );
}

目前的输出存在两个主要问题。首先，除非我明确设置每个输入元素的宽度，否则它们的宽度不会考虑组合框旁边的文本。其次，组合按钮显示在文本的右侧而不是左侧。

如果我在HTML中手动创建这些组合按钮，它们的结构就可以了。我在使用jQuery做错了吗？

Answer 1

就评论中的问题而言（即“为什么我的单选按钮没有被赋予默认宽度（文本大小）以及为什么单选按钮位于文本的右侧而不是左侧。 “），单选按钮（或任何<input>元素）没有内容。因此，text呈现的位置取决于浏览器的情绪（或多或少）。通常的结构如下：

<input type="radio" id="x" /><label for="x">Your text here</label>

我遗漏了说明结构所不需要的所有属性。那么，你想要做的是创建没有text位但具有id属性的单选按钮;然后，创建一个带有适当for属性和text的标签元素，并在单选按钮之后但在换行符之前删除标签。也许更像这样的东西会起作用：

for(var i = 0, format; format = phoneFormats[i]; ++i) {
    var input = $('<input>', {
        id: 'phone-format-radio-' + i,
        style: 'width: 400',
        type: 'radio',
        name: 'phone-format-radio',
        value: i
    }).after(
        '<label for="phone-format-radio-' + i + '">'
        + GetDisplayNumber(format)
        + '</label><br/>'
    );
    $(id + ' > button').before( input );
}

使用jQuery创建时，组合按钮显示不正确

1 个答案: