根据字母添加类

Question

当"td field“只有字母”A“或”B“时，我想向它添加一个额外的类。现在，如果单词中包含a或b字母，它会添加"big-a“和"big-b”类。

$(".column-1").addClass(function() {
var text = $(this).text();
if (~text.indexOf("A")) {
    return "big-a";
} else if (~text.indexOf("B")) {
    return "big-b";
}

})；

<div class="data">
<table>
    <tr class="row-1 odd" role="row">
        <td class="column-1">A</td>
    </tr>
    <tr class="row-2 odd" role="row">
        <td class="column-1">Adidas</td>
    </tr>
    <tr class="row-3 odd" role="row">
        <td class="column-1">Accoss</td>
    </tr>
    <tr class="row-4 odd" role="row">
        <td class="column-1">B</td>
    </tr>
    <tr class="row-5 odd" role="row">
        <td class="column-1">Blues</td>
    </tr>
    <tr class="row-6 odd" role="row">
        <td class="column-1">Business</td>
    </tr>        
</table>

​

链接到JSfiddle：https://jsfiddle.net/petersenhp/bwcehumc/6/

Answer 1

使用相等而不是.indexOf()，因为您要查找的是A，而不是任何包含A的内容。

$(".column-1").addClass(function() {
    var text = $(this).text();
    if (text === "A") {
        return "big-a";
    } else if (text === "B") {
        return "big-b";
    }
});

如果你修改了你的HTML，你可以不用任何JS就能做到这一点。

​

tr:first-child td {
  font-size: 20px;
}

.column-1 {
  font-size: 14px;
}

<div class="data">
  <table>
    <tbody>
      <tr class="row-1 odd" role="row">
        <td class="column-1">A</td>
      </tr>
      <tr class="row-2 odd" role="row">
        <td class="column-1">Adidas</td>
      </tr>
      <tr class="row-3 odd" role="row">
        <td class="column-1">Accoss</td>
      </tr>
    </tbody>
    <tbody>
      <tr class="row-4 odd" role="row">
        <td class="column-1">B</td>
      </tr>
      <tr class="row-5 odd" role="row">
        <td class="column-1">Blues</td>
      </tr>
      <tr class="row-6 odd" role="row">
        <td class="column-1">Business</td>
      </tr>
    </tbody>
    <tbody>
      <tr class="row-4 odd" role="row">
        <td class="column-1">C</td>
      </tr>
      <tr class="row-6 odd" role="row">
        <td class="column-1">Citrus</td>
      </tr>
    </tbody>
  </table>

​

Answer 2

 && text.length == 1

将其添加到您的条件句中，以确保文本中只有一个字符。

Answer 3

不要使用正则表达式：

$(".column-1").addClass(function() {
    var text = $(this).text();
    if (text=="A") {
        return "big-a";
    } else if (text=="B") {
        return "big-b";
    }
});