jquery如何解析对象的类或属性答案

【问题标题】：jquery how to parse class or attributes of objectjquery如何解析对象的类或属性
【发布时间】：2014-03-05 10:00:59
【问题描述】：

对不起，如果这是一个“菜鸟”问题。（我已经对其进行了大量编辑，以便更清楚地了解我在寻找什么。）考虑一些链接：

<p><a class="bgColor_0" href="whatever">Click Me</a></p>
<p><a class="bgColor_1" href="whatever">Click Me</a></p>
<p><a class="bgColor_2" href="whatever">Click Me</a></p>

页面上的其他地方有一个 DIV，它也使用相同的类名。所以在样式表中：

div.bgColor_1 {background-color: #ffffff; }
div.bgColor_2 {background-color: #00ffff; }
div.bgColor_3 {background-color: #ffff00; }

我想要的是获取单击的类的背景颜色属性的值作为字符串（如果未设置，则为空）。

所以我想创建一个点击函数来测试以 bgColor_ 开头的类

jQuery('a').click( function(){ 
  myClass = jQuery(this).attr('class').match(/\bbgColor_\S+/g); 
  // eg. myClass = 'bgColor_0';
  // now... how do I get the background-color property of bgColor_0?;

} );

我想要得到的是类 myClass 的 div 的 backgroundColor 属性的 -value-

例如。如果用户点击 a.bgColor_1，我想在样式表中获取类 div.bgColor_1 的 background-color 属性，然后将另一个（待确定）div 分配给类 bgColor_1，以便我可以更改其颜色。

【问题讨论】：

有什么理由不能同时拥有bg_Color_X 和hasBgColor？这样你就不必做任何部分匹配选择器。
顺便说一下，类名 bgColor_0 不是很语义化。尝试查看sass-lang.com，这样您就不必滥用类名来避免在多个地方重复相同的颜色
@ErikPhilips 没有理由，这在我的书中是一个更清洁的解决方案。它将三个元素在语义上联系在一起，而不是依赖子字符串来分组元素

标签： jquery css attr

【解决方案1】：

你的意思是这样的？

jQuery('a').click( function(){ 
    alert( $(this).css('background-color') );
} );

【讨论】：

【解决方案2】：

我认为人们回答错了问题。我认为你的问题是

“如何获得 bgColor_0 的背景颜色属性？”但它应该是“如何获得具有以 bgColor 开头的 css 类的链接的背景颜色属性？”

http://jsfiddle.net/mendesjuan/j4q56/

jQuery('a').click( function(){ 
   var $link = jQuery(this);
   var isMatch = $link.attr('class').match(/\bbgColor_\S+/g); 
   if (isMatch) {
       console.log($link.css('background-color'));
   }    
} );

见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match和http://api.jquery.com/css/

请注意，bgColor_0bgColor_1 的这种模式似乎是一种反模式并且是代码异味。

【讨论】：

你是对的。每个人都在关注它的正则表达式部分——显然我不够清楚。基本上我正在使用链接的类来修改另一个页面元素上的类。（当您单击一个链接时，它会通过添加一个类来更改 div 的 bgcolor。）我一定有一个高级的时刻。我需要做的就是捕获类，然后使用 $link.css('background-color') DUUUUH。感谢您帮助我摆脱迷雾。

【解决方案3】：

试试这个：

$(this).attr('class').substring(0,7)="bgcolor"

为了获得一个类的属性，我想告诉你这个：

Look Here

【讨论】：

这是最接近答案的。但是，如果该元素有多个类怎么办？
你可以使用：$(this).hasClass('bgcolor')
我错了，这是我需要的“正确”答案......不是最初的评论，而是链接“看这里”，结果证明这是我需要的。显然，您需要遍历样式表以获取当前未激活的选择器的属性......我没有意识到这一点。因此，该链接中的功能可以完成这项工作。此外，开销低得惊人。谢谢！
@jchwebdev 请花一些额外的时间来制定您的问题。你让每个人都猜测你真正的问题是什么，甚至你改变了你对问题的想法。您真正的问题是，“我怎么知道哪些样式与 CSS 类相关联？”
已编辑。不幸的是，在答案变得更加明显之前，我真的不知道如何很好地提出问题，这是其中之一。感谢您的帮助。

【解决方案4】：

您正在寻找部分匹配选择器：

$(this).is("[class^='bgColor']")

它又短又甜，它要求类以bbgColor 开头，就像你的例子一样。

如果您需要允许类出现在属性中的任何位置，请使用：

$(this).is("[class*='bgColor']")

【讨论】：

错字？我什么也没看到。它工作正常：codepen.io/helion3/pen/jkDLg
抱歉，我正在阅读他的 HTML 标记，我看到了 bgColor_，所以我想知道为什么你们两个选择器中都有两个 b
啊，我专注于js，一直看到\bbgColor。没有在心里忽略\b
是的，我也很困惑，这里的 OP 不是很清楚
这使它工作，但我认为“正确”的解决方案是拥有更好的 CSS 类名，OP 应该摆脱 _0 altotgether，或者如果 OP 真的需要它们，添加CSS 类 bgcolor 到所有元素。听起来比依赖字符串的开头更干净