Wie kann ein Text dynamisch an den Text einer glänzenden App angehängt werden?

Question

Ich versuche, einen reaktiven Text (der Farbname von selectInput) an den Körper einer glänzenden App nach tags$h3 anfügen. Ich schätze, das ist eher ein Problem mit jquery, aber im Moment wird die ausgewählte Farbe hinzugefügt, anstatt die Zeichenfolge "reaktiv" anzuzeigen.

Was ich stattdessen möchte, ist die Zeichenfolge innerhalb h3.colorLabel zu ersetzen.

ui.R

library(shiny) 
jsCode <- "shinyjs.pageCol = function(params){ 
$('body').css('background', params); 
/*$('.colorName').after('<h3></h3>').addClass('colorLabel'); 
$('h3.colorLabel').replaceWith('<h3>'+params+'</h3>').addClass('colorLabel'); 
*/ 
$('h3.colorName').after('<h3>'+params+'</h3>').addClass('colorLabel'); 
}; 
" 

shinyUI(fluidPage(
    useShinyjs(), 
    extendShinyjs(text = jsCode), 
    selectInput("col", "Colour:", 
       c("white", "yellow", "red", "blue", "purple")), 
    tags$h3('Just in case you are color-blind, the background color is:', class='colorName') 
)) 

server.R

library(shiny) 
library(shinyjs) 

shinyServer(


    function(input,output,session) { 

     observeEvent(input$col, { 
     js$pageCol(input$col) 
     }) 
     }) 

Answer 1

Ich denke, das ist das, was Sie wollen. Es bearbeitet die innere Farbe der h3' element with the colorLabel` Klasse. Ich fügte auch dem UI-Code ein entsprechendes leeres initialisiertes Element hinzu, so dass etwas zu bearbeiten wäre.

library(shiny) 
library(shinyjs) 

jsCode <- "shinyjs.pageCol = function(params){ 
$('body').css('background', params); 
$('h3.colorLabel').text(params); 
}; 
" 

u <- shinyUI(fluidPage(
    useShinyjs(), 
    extendShinyjs(text = jsCode), 
    selectInput("col","Colour:", 
       c("white","yellow","red","blue","purple")), 
    tags$h3('Just in case you are color-blind, the background color is:',class ='colorName'), 
    tags$h3('',class = 'colorLabel') 
)) 


s <- shinyServer(


    function(input,output,session) { 

    observeEvent(input$col, { 
     js$pageCol(input$col) 
    }) 
    }) 
shinyApp(ui = u,server = s) 

wodurch man

Und das ist, was intern bearbeitet wird: