javascript - 修改动态创建的 jQuery 复选框按钮的 css

Question

我正在循环中创建一系列 jQuery 复选框，如下所示:

var checkbox = $('<input>').attr({type: 'checkbox', id: checkbox_id);
panel.append(checkbox);
panel.append($('<label>').attr({for: checkbox_id}).html(checkbox_name);
checkbox.button();

我有一个名为 my-style 的 css 类，它定义了 border-radius、padding 和 line-height 。我希望 my-style 只为我创建的复选框覆盖 jQuery 主题定义的属性。

我尝试了 checkbox.addClass("my-style"); 和 panel.find(".ui-button-text").addClass("my-style")，但两者均无法正常工作。一些 css 属性确实会覆盖 jQuery 的默认值，例如 border-radius，而其他属性似乎永远无法被覆盖，例如 line-height 和 padding 。我什至尝试通过 panel.find(".ui-button-text").css("line-height", 1.0); 直接强制执行 css 属性，但这根本不起作用.

我知道我可以通过更改其中的 css 代码直接修改 jQuery 主题，但这样做会影响所有制作的按钮，这不是我想做的。

更新:

我设法解决此问题的一种方法是直接指定 style 标记。所以上面的代码变成了:

var checkbox = $('<input>').attr({type: 'checkbox',
                                  id: checkbox_id});
panel.append(checkbox);
var label = $('<label>').attr({for: checkbox_id,
                               style: "font-size: 0.6em; border-radius: 0px; margin-right: 0.3em;"}).text(checkbox_name);
panel.append(label);
checkbox.button();
label.children().attr("style", "padding: 0.2em 0.4em;");

虽然这个解决方案有效，但它并不令人愉快，因为我将 JavaScript 和 CSS 代码混合在一起。

通过在 style 属性中写入，我可以覆盖 jQuery UI 的 CSS。这里讨论的一件事是使用比 jQuery UI 的 CSS 类具有更多权重的更具体的 CSS 选择器。更具体的选择器应该是具有复选框 ID 的东西。这种方法的问题在于复选框是动态生成的，因此复选框 ID 也是如此。因此，根据我的理解，拥有更具体的 CSS 选择器是不可行的。

Answer 1

问题是该类没有应用到元素上，还是该类没有按您希望的方式执行？

如果是后者，您可以粘贴您类(class)的 css 代码吗？