如何向 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);
    }
  });
});