的jQuery使用CSS变量混合，下划线和连字符

Question

所以我有一个CSS文件看起来像这样：

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

然后，我有一个jQuery的方法是这样的：

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

我不知道下划线和连字符是什么，因为在css文件中没有任何内容有下划线或连字符。我真的不明白你如何在CSS中传递变量。

Answer 1

该函数从文本框动态获取文本。所以，如果你传递一个字符串参数一样"blah"到功能：

textbox("blah"); 

那么它具有类textbox_blah或textbox-blah的jQuery is getting the text inside of the element。

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

Answer 2

让我们假设名称== foo。如果我理解你的权利，你要比较你的CSS和JavaScript代码，并注意到这些标识符之间的相似性：

• .textbox
• .textbox-foo
• .textbox_foo

所以，你想：foo某种参数或pseudo-class与您的CSS中的.textbox类相结合？这里有什么关系？

答：没有。textbox,​​和textbox_foo都是完全不同的HTML/CSS类名称。连字符和下划线作为CSS中标识符的一部分是完全有效的，因此这三个类与它们被命名为abc，def和ghi不同。

所以没有变量传递给你的CSS。你是对的，CSS没有变量。你所看到的只是具有相似名称的不同类，但就浏览器而言，它们是不相关的。

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

jsFiddle Demo

至于JavaScript的textbox功能，有没有办法告诉它做什么，没有看到它的其余部分。基于我见过的其他jQuery插件，我的猜测是，它根据您提供的name参数来操作页面中新的或现有的文本框。它可能会向它们添加样式和行为，并在此过程中动态地添加类别为​​和/或textbox_foo的HTML元素。类似的名字可能会帮助你理解生成的HTML源代码。