jQuery:如何区分用于CSS的类和用于jQuery操作的类?

时间:2017-01-04 11:29:42

标签: jquery css

假设我有以下代码:

HTML:

<div class="myclass1">some text</div>

CSS:

.myclass1 { color: red; }

jQuery的:

$('.myclass1').text();

现在很简单,但是当代码变大时,我发现很难区分仅用于CSS的类和仅用于jQuery的其他类。例如:

<div class="myclass1 myclass2 myclass3 myclass4 myclass5">some text</div>

现在,当我查看具有许多类的div时,要知道哪些类仅用于CSS,并且仅用于jQuery,以及CSS和jQuery都使用它们并不容易。

问题:是否已经有办法避免这个问题?或者我只是在思考它?

我正在考虑根据用法命名我的类,因此例如用于CSS的类将被命名为“css_myclass1”,用于jQuery的类将被命名为“jq_myclass2”,并且用于两者的类将被命名为“cssjq_myclass3”。

注意:我知道答案可能是基于意见的,但我需要知道可以使用哪些不同的方法,特别是因为我即将开始一个简单的项目,其中这个简单问题可能会很快变成噩梦 - 代码 - 复杂性!

5 个答案:

答案 0 :(得分:5)

我们使用的方法是为Javascript和jQuery命名类,不应该用前缀为“js-”的样式。布局类很正常,没有前缀。

最近我们尝试切换到使用数据属性来解决非样式jQuery问题。

答案 1 :(得分:3)

没有内置的方法来区分为样式表保留的类和为脚本保留的类,因为首先没有这样的区别。 class属性包含一个或多个类名,可用于任何目的。您预计某些类名在多个地方使用的事实只是为了进一步说明这一点。没有理由必须为样式表或脚本或任何其他单一用途保留给定元素上的给定类名。

如果你真的必须将你的风格和脚本类分开,你必须自己命名它们。

答案 2 :(得分:1)

如你所说,没有对错。话虽如此,你可以例如使用data attribute(jQuery data())来获取与jQuery相关的东西,并仅使用类来进行CSS样式化。

答案 3 :(得分:1)

建议可以使用CSS的类和JavaScript的数据属性:

HTML:

<div class="myclass1" data-value="some">some text</div>

CSS:

.myclass1 { color: red; }

jQuery的:

$('[data-value="some"]').text();

答案 4 :(得分:0)

我发现在ID es上使用class有助于区分不使用 JavaScript 的元素与那些元素之间的区别。

所以,我通常只会在 JavaScript jQuery 中使用的元素中添加ID,并保留class对于 CSS 方面的事情。