除非单击同一 div 中的另一个按钮，否则闪亮按钮将保持活动状态答案

【问题标题】：Shiny button stays active unless another button from same div is clicked除非单击同一 div 中的另一个按钮，否则闪亮按钮将保持活动状态
【发布时间】：2021-10-25 15:57:41
【问题描述】：

以下 Shiny 应用有 3 个按钮（不活动时为蓝色）。当一个按钮被点击（激活）时，它应该变成红色，直到另一个按钮被点击。如果用户点击了应用中的其他地方（例如背景，或按钮以外的任何其他小部件），点击的按钮应该保持红色。

library(shiny)
library(shinyjs)

ui <- fluidPage(
    useShinyjs(),
    
    # CSS
    tags$head(
        tags$style(HTML("
            .btn{
                color: white;
            }
            .item{
                background-color: lightblue;
            }
            .active{
                background-color: red;
            }
        "))
    ),
    
    div(id = "buttons",
        actionButton(inputId = "button_1", label = "Button 1", class = "item"),
        actionButton(inputId = "button_2", label = "Button 2", class = "item"),
        actionButton(inputId = "button_3", label = "Button 3", class = "item")
    )
)

server <- function(input, output, session) {
    # JS
    runjs(HTML("
        $('#buttons .item').on('click',function(){
            $('#buttons .item.active').removeClass('active');
            $(this).addClass('active');
        });
    "))
    
    session$onSessionEnded(stopApp)
    
}

shinyApp(ui, server)

此行为在下面的 sn-p 中有效，但在应用程序中，单击时按钮不会变为红色。

$('#buttons .item').on('click',function(){
    $('#buttons .item.active').removeClass('active');
    $(this).addClass('active');
});

button{
  color: white;
}
.item{
  background-color: lightblue;
}
.active{
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="buttons">
  <button class="item">Button 1</button>
  <button class="item">Button 2</button>
  <button class="item">Button 3</button>
</div>

【问题讨论】：

标签： javascript css r shiny

【解决方案1】：

这是因为在 Shiny 中已经有一个名为 active 的类，它为按钮设置了背景颜色。所以你必须使用另一个名字并使用!important。而且你在runjs() 中不需要HTML。

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  
  # CSS
  tags$head(
    tags$style(HTML("
            .btn{
                color: white;
            }
            .item{
                background-color: lightblue;
            }
            .myactive{
                background-color: red !important;
            }
        "))
  ),
  
  div(id = "buttons",
      actionButton(inputId = "button_1", label = "Button 1", class = "item"),
      actionButton(inputId = "button_2", label = "Button 2", class = "item"),
      actionButton(inputId = "button_3", label = "Button 3", class = "item")
  )
)

server <- function(input, output, session) {
  # JS
  runjs("
        $('#buttons .item').on('click',function(){
            $('#buttons .item.myactive').removeClass('myactive');
            $(this).addClass('myactive');
        });
    ")
  
  session$onSessionEnded(stopApp)
  
}

shinyApp(ui, server)

【讨论】：