javascript - 根据字母添加类别

Question

我想向“td 字段”添加一个额外的类，当它只有字母“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>