добавить / удалить класс 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>

И выглядит визуально так:

Наконец, я хотел бы изменитьпосмотрите на некоторые из этих пунктов меню в определенных случаях.Конкретный сценарий ... Я хочу, чтобы у div с 'data-value = "2"' был текст BOLD RED .Как я могу специально добавить / удалить класс CSS ниже (.menuItemInactive) из div с data-value = '2'?Я уже использую блестящий.js и был бы рад использовать его или любой другой пакет для этой задачи.

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

Answer 1

Этого можно добиться с помощью пакета smoothjs и метода runjs. Во второй функции Наблюдения за событиями вы проверяете, какое значение из selectInput выбрано, и затем соответственно изменяете свойства CSS этого div.

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;
}