Jquery与CSS混合使用变量、下划线和连字符

Question

所以我有一个像这样的css文件:

.textbox{
 position: fixed;
 width: 225px;
 }

那么我有一个JQuery方法，看起来像这样:

function textbox(name) {
...
$(".textbox_" + name).text();
...
$(".textbox-" + name).text();
    }

我不知道下划线和连字符做什么，因为在css文件中没有下划线或连字符。我真的不明白你怎么能在css中传递变量

Answer 1

假设name == foo。如果我理解对了，你是在比较CSS和JavaScript代码，并注意到这些标识符之间的相似性:

• .textbox
• .textbox-foo
• .textbox_foo

所以你想知道:foo是与CSS中的.textbox类结合的某种参数或伪类吗?这是什么关系呢?

答案:没有。 textbox、textbox-foo和textbox_foo是完全不同的HTML/CSS类名。在CSS中，连字符和下划线作为标识符的一部分是完全有效的，所以这三个类就像它们被命名为abc、def和ghi一样不同。

所以没有变量被传递到你的CSS。你是对的，CSS没有变量。你所看到的都是不同的类，它们有着相似的名字，但是对于浏览器来说是不相关的。

jQuery调用$(".textbox_" + name)是JavaScript，但是，可以在JavaScript中传递变量。使用jQuery，这段代码找到一个类名为textbox_foo的HTML元素序列，其中foo是传递给textbox函数的任何名称。它不会触及textbox或textbox-foo类的元素，除非它们也具有textbox_foo类。

<<p> jsFiddle演示/strong>

至于JavaScript textbox函数，如果不看到它的其余部分，就无法知道它做了什么。根据我所见过的其他jQuery插件，我的猜测是，它根据您提供给它的name参数来操作页面中新的或现有的文本框。它可能会为它们添加样式和行为，并在此过程中动态添加具有textbox-foo和/或textbox_foo类的HTML元素。类似的名称可能是为了帮助您理解生成的HTML源代码。

Answer 2

该函数动态地从文本框中获取文本。如果你传递一个字符串参数比如"blah"给这个函数

textbox("blah");

然后jQuery正在获取元素中的文本，该元素的类为textbox_blah或textbox-blah。

如果这些元素确实存在，你可以在类名上使用CSS来样式化它们。