css - 通过 shiny 添加/删除 css 类到 div

Question

我有一个 Shiny 的选择菜单，如下所示。

selectInput(
        "mySelectMenu",
        "",
        c(1,2),
        selected = NULL,
        multiple = FALSE
      )

在这个元素上观察到的 Action 如下所示

observeEvent(input$mySelectMenu,{
    currentIndividual<-as.numeric(input$mySelectMenu)
    toggleFunction(currentIndividual)
},ignoreInit=TRUE)

在检查器中，我可以看到这个包含下拉内容的 div。它的 html 看起来像这样

<div class="selectize-dropdown-content">
   <div data-value="1" data-selectable="" class="option selected">318_2007</div>
   <div data-value="2" data-selectable="" class="option">320_2007</div>
   <div data-value="3" data-selectable="" class="option">321_2007</div>
   <div data-value="4" data-selectable="" class="option">344_2009</div>
   <div data-value="5" data-selectable="" class="option">346_2009</div>
   <div data-value="6" data-selectable="" class="option">355_2009</div>
</div>

它看起来像这样

最后，我想在某些情况下更改其中一些菜单项的外观。一个特定的场景...我希望带有“data-value="2"”的 div 具有 BOLD RED 文本。我如何从数据值='2'的div中专门添加/删除下面的CSS类(.menuItemInactive)？我已经在使用 shiny.js 并且很乐意使用它或任何其他包来完成这项任务。

.menuItemInactive{
    font-weight:bold;
    color:red;
}

Answer 1

您可以使用 shinyjs 包和 runjs 方法来实现。在第二个 observeEvent 函数中，您检查选择了 selectInput 中的哪个值，然后相应地更改该 div 的 css 属性。

library(shiny)
library(shinydashboard)
library(shinyjs)

ui <- fluidPage(
  shinyjs::useShinyjs(),
  tabItem(tabName = "comp",
          fluidRow(
            selectInput("mySelectMenu", "",c(1,2,3),selected = NULL, multiple = FALSE
            )))
)

server <- function(input, output, session) { 
  observeEvent(input$mySelectMenu,{
    currentIndividual<-as.numeric(input$mySelectMenu)
    # toggleFunction(currentIndividual)
  },ignoreInit=TRUE)

  observeEvent(input$mySelectMenu, {
    if (input$mySelectMenu == 1) {
      runjs(paste0('$(".selectize-input").css({"color": "red", "font-weight": "bold"})'))
    }
    if (input$mySelectMenu == 2) {
      runjs(paste0('$(".selectize-input").css({"color": "blue", "font-weight": "bold"})'))
    }
    if (input$mySelectMenu == 3) {
      runjs(paste0('$(".selectize-input").css({"color": "green", "font-weight": "bold"})'))
    }
  })
}

shinyApp(ui, server)

如果选择了一个元素，它只是应用 css，如果打开下拉框，所有元素仍然是黑色的。您希望它始终具有所需的颜色，还是此解决方案适合您？