Question

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

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

然后我有一个看起来像这样的JQuery方法：

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

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

Answer 1

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

.textbox
.textbox-foo
.textbox_foo

所以你想知道：foo某种参数或pseudo-class是否与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类。

<强> jsFiddle Demo

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

Answer 2

该函数从文本框动态获取文本。因此，如果将"blah"之类的字符串参数传递给该函数：

textbox("blah");

然后是jQuery is getting the text inside of the element，其中包含textbox_blah或textbox-blah。

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

jquery使用变量，下划线和连字符与css混合

2 个答案: