如何向 shiny 應用程序中的每個 radioGroupButtons 小部件全局提供 css

Question

我有這個改編自這里的最小示例R shiny radiogroup Button change color ：

library(shiny)

  ui = fluidPage(
    radioGroupButtons(
     # status = "primary ",  ##  you can change status value to change to select few colors
      inputId = "a",
      checkIcon = list(yes = icon("check")),
      choiceValues = 0:3,
      choiceNames = paste0(0:3),
      justified = TRUE, width = "300px"
    ),
    tags$script("$(\"input:radio[name='a'][value=0]\").parent().css('background-color', '#7EF373');"),
    tags$script("$(\"input:radio[name='a'][value=1]\").parent().css('background-color', '#E7E7E7');"),
    tags$script("$(\"input:radio[name='a'][value=2]\").parent().css('background-color', '#EDB6B2');"),
    tags$script("$(\"input:radio[name='a'][value=3]\").parent().css('background-color', '#DE6B63');"),
    
    radioGroupButtons(
      # status = "primary ",  ##  you can change status value to change to select few colors
      inputId = "b",
      checkIcon = list(yes = icon("check")),
      choiceValues = 0:3,
      choiceNames = paste0(0:3),
      justified = TRUE, width = "300px"
    ),
    tags$script("$(\"input:radio[name='b'][value=0]\").parent().css('background-color', '#7EF373');"),
    tags$script("$(\"input:radio[name='b'][value=1]\").parent().css('background-color', '#E7E7E7');"),
    tags$script("$(\"input:radio[name='b'][value=2]\").parent().css('background-color', '#EDB6B2');"),
    tags$script("$(\"input:radio[name='b'][value=3]\").parent().css('background-color', '#DE6B63');")
    )
  server = function(...) {}

  shinyApp(ui, server)

它基本上是 colors 分組單選按鈕。

我想將此 colors 應用於每個 radioGroupButtons 小部件，而無需一次又一次地使用四行。

我試着用父目錄中的 css 文件來做，但我不知道如何在 css 中寫四行，例如

怎么寫：

 tags$script("$(\"input:radio[name='a'][value=0]\").parent().css('background-color', '#7EF373');"),
    tags$script("$(\"input:radio[name='a'][value=1]\").parent().css('background-color', '#E7E7E7');"),
    tags$script("$(\"input:radio[name='a'][value=2]\").parent().css('background-color', '#EDB6B2');"),
    tags$script("$(\"input:radio[name='a'][value=3]\").parent().css('background-color', '#DE6B63');"),

在 .css 文件中並在 radioGroupButtons 小部件中使用它？

Answer 1

tags$script用於運行一些 JavaScript 代碼，這不是一些 CSS 代碼（ tags$style用於 CSS）。

這段代碼的第一部分：

$(\"input:radio[name='a'][value=0]\").parent().css('background-color', '#7EF373');

即$(\"input:radio[name='a'][value=0]\")選擇一個或多個 HTML 元素。 即，它以name屬性等於'a'和值屬性等於0的所有無線電輸入為目標。 您可以刪除[name='a']部分，以便選擇另一個單選組。

如果要將此代碼放在外部文件中，請在包含此代碼的www子文件夾中創建一個.js文件：

$(document).ready(function() {
  $("input:radio[value=0]").parent().css('background-color', '#7EF373');
  $("input:radio[value=1]").parent().css('background-color', '#E7E7E7');
  $("input:radio[value=2]").parent().css('background-color', '#EDB6B2');
  $("input:radio[value=3]").parent().css('background-color', '#DE6B63');
});

然后通過在 UI 中添加此代碼將此文件包含在您的應用程序中：

tags$head(tags$script(src = "yourJSfile.js")),

有關按屬性值選擇的更多信息，請參見 此處。

您也可以按以下方式進行：

$(document).ready(function() {
  $("input:radio").each(function() {
    var value = $(this).attr("value");
    var color;
    switch(value) {
      case 0:
        color = "#E7E7E7";
        break;
      case 1:
        color = "#EDB6B2";
        break;
      case 2:
        color = "#AAAAAA";
        break;
      case 3:
        color = "#DE6BB3";
    }
    $(this).parent().css('background-color', color);
  });
});

或者，如果您只想定位這兩個無線電組：

$(document).ready(function() {
  $("input:radio").each(function() {
    var name = $(this).attr("name");
    if(name === "a" || name === "b") {
      var value = $(this).attr("value");
      var color;
      switch(value) {
        ......
      }
      $(this).parent().css('background-color', color);
    }
  });
});