如何切换要在JavaFXML按钮中查看的图像文件？

Question

我正在尝试在两种状态之间切换按钮。一种状态是显示 红色圆圈的图像，另一个状态是蓝色圆圈的图像。用户单击按钮时，应在状态之间切换。我已经设定 在CSS中添加样式以容纳按钮：

#button-debit {
    -fx-background-image: url("images/redButton.jpg");     
}

#button-credit {
    -fx-background-image: url("images/blueButton.png");
}

要查看是否可行，我尝试通过执行以下操作将红色从红色转换为蓝色：

@FXML
  private void handledborcrBtn() {
    dborcrBtn.setId("button-credit");
  }

但是结果不符合预期。红色按钮图像保留在原处，蓝色按钮在其下，但蓝色图像分为几部分。

我想我记得javax Swing中的一个'repaint'方法，但是JavaFXML似乎更复杂，我很难使它正常工作。

Answer 1

尝试使用ToogleBotton

.toggle-button {
  -fx-graphic: url('icons.jpg');
}

.toggle-button:selected {
  -fx-graphic: url('othericon.png');
}