Die folgende Tabelle enthält einige Arten von Klassen. Ich möchte die Farbzellen 1 und 2 durch Klicken ändern. Dies bedeutet, dass die Farbe nur geändert wird, wenn in jeder Zelle keine Hintergrundfarbe festgelegt ist.

Gibt es dafür eine Methode? Vielen Dank

$(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>
1
Heisenberg 24 Feb. 2020 im 10:09

4 Antworten

Beste Antwort

Sie können eine Klasse hinzufügen, die dem Stil background:yellow entspricht. Auf diese Weise erhält der ID-Auswahlstil bei jeder anderen Farbe, die ihm von id zugewiesen wird, die Priorität, obwohl die Klasse;

$(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>
5
Yosef Tukachinsky 24 Feb. 2020 im 07:20

Sie können überprüfen, ob das Element eine transparente Hintergrundfarbe hat

$(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>
1
Dmytro Cheglakov 24 Feb. 2020 im 08:06

Überprüfen Sie im Click-Event-Handler zunächst, ob für das Element eine Farbe festgelegt ist, und ändern Sie die Farbe nur, wenn sie nicht den erforderlichen Kriterien entspricht. Sie können $(this).css('background-color') verwenden, um die aktuelle Farbe abzurufen.

$(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>
2
Vivek 24 Feb. 2020 im 07:18
$(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>
1
Harshsetia 24 Feb. 2020 im 07:22