Как изменить цвет фона, только если фон не установлен в таблицах html

Question

В таблице ниже представлены несколько типов классов. Я хотел бы изменить цвет ячейки 1 и 2, нажав, это означает, что цвет изменяется только в том случае, если в каждой ячейке не задан цвет фона.

Есть ли способ для этого? Спасибо

$(function() {
  $("td").click(function() {
    $(this).css('background-color','yellow');
  });
});

#aqua {
    border-bottom: 3px solid aqua;
}
#green {
    background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td id="1">1</td>
<td id="aqua">2</td>
<td id="green">3</td>
</table>

Answer 1

Вы можете добавить класс, который придаст ему стиль background:yellow. таким образом, всякий раз, когда любой другой цвет, данный ему идентификатором, стиль селектора идентификатора получит приоритет, хотя класс;

$(function() {
  $("td").click(function() {
    $(this).addClass('default-yellow');
  });
});

#aqua {
    border-bottom: 3px solid aqua;
}
#green {
    background-color:green;
}
.default-yellow {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td id="1">1</td>
<td id="aqua">2</td>
<td id="green">3</td>
</table>

Answer 2

В обработчике события click сначала проверьте, установлен ли для какого-либо элемента какой-либо цвет, и измените его, только если он не соответствует требуемым критериям. Вы можете использовать $(this).css('background-color'), чтобы получить текущий цвет.

$(function() {
  $("td").click(function() {
    if ($(this).css('background-color') === 'rgba(0, 0, 0, 0)') {
      $(this).css('background-color', 'yellow')
    }
  });
});

#aqua {
  border-bottom: 3px solid aqua;
}

#green {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <td id="1">1</td>
  <td id="aqua">2</td>
  <td id="green">3</td>
</table>

Answer 3

Вы можете проверить, имеет ли элемент прозрачный цвет фона

$(function() {
  $("td").click(function() {
    if ($(this).css('background-color') == 'rgba(0, 0, 0, 0)') {
      $(this).css('background-color','yellow');
    };
  });
});

#aqua {
    border-bottom: 3px solid aqua;
}
#green {
    background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td id="1">1</td>
<td id="aqua">2</td>
<td id="green">3</td>
</table>

Answer 4

$(function() {
  $("td").click(function() { 
    $(this).addClass('test');
  });
});

#aqua {
    border-bottom: 3px solid aqua;
}
#green {
    background-color:green;
}
.test{background:yellow;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td id="1">1</td>
<td id="aqua">2</td>
<td id="green">3</td>
</table>