通过闪亮添加/删除css类到div

Question

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

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

在此元素上观察到如下所示的操作

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 文本。如何从 data-value='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，如果打开下拉框，所有项目仍然是黑色的。您是否希望它始终具有所需的颜色，或者此解决方案适合您？

Answer 2

然后我认为@kluu 和我之前的答案的组合可以解决问题。 但是像这样，项目的顺序决定了下拉模式中的颜色，而不是它们的数据值。

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

ui <- fluidPage(
  shinyjs::useShinyjs(),
  inlineCSS(".selectize-dropdown-content > .option:nth-child(1) {
            font-weight:bold;
            color:red;
            }
            .selectize-dropdown-content > .option:nth-child(2) {
            font-weight:bold;
            color:blue;
            }
            .selectize-dropdown-content > .option:nth-child(3) {
            font-weight:bold;
            color:green;
            }

            "
  ),
  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)

Answer 3

如果颜色不取决于它所持有的值，而是取决于列表中出现的顺序，您可以使用nth-child：

.selectize-dropdown-content > .option:nth-child(2) {
  font-weight:bold;
  color:red;
}