css - 通过闪亮添加/删除css类到div
问题描述
我有一个闪亮的选择菜单,如下所示。
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;
}
解决方案
然后我认为@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)
推荐阅读
- angular - 如何在Angular中注入具有构造函数参数的对象?
- javascript - 如何使用 Javascript 在 Angular 中出现错误时在 src 图像之间切换?
- android - 如何将私有 android 应用程序分发到特定设备?
- google-colaboratory - 如何在 google colab 中运行 python 代码?
- java - 为什么我尝试在另一台计算机上运行 Client.jar 但收到连接被拒绝”或“连接超时
- c++ - mariadb 连接器 c 的链接选项
- sql - 当两个表通过内部连接函数组合时如何组合两个数据透视表
- json - jq 有管道错误。没有管道不会出错
- python - 如何将一串 URL 查询参数解析为 pandas Dataframe 的多列?
- ios - TableView单元格内的TableView,自动调整单元格高度