修改动态创建的jQuery复选框按钮'

Modify dynamically created jQuery checkbox button's css

本文关键字：按钮 复选框 jQuery 动态 创建 修改      更新时间：2023-09-26

我在循环中创建了一系列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选择器是不可行的。

问题是类没有应用到元素，或者类没有做你想做的事情?

如果是后者，你能粘贴你的类的css代码吗?

听起来你的CSS选择器不够具体，你在这里有两个选项

  1. 用!important来声明你的CSS属性，以覆盖任何被选中的
    2. 写一个更具体的CSS选择器

后者是更好的选择，因为您将在后面的阶段对样式有更多的控制。如果你不太了解CSS选择器，请阅读这个(http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html)，它应该有助于理解编写更具体的选择器和每个选择器类型的值。

相关文章：