【问题标题】:How to fix 'setAttributeNode(att)' to add attribute vice modify existing?如何修复'setAttributeNode(att)'以添加属性副修改现有?
【发布时间】:2019-06-05 23:13:32
【问题描述】:

我正在使用shinyJS 包以及shiny 标记和传统HT​​ML 将属性“标题”添加到现有元素。我可以在控制台(检查员 [Google CHROME])中毫无问题地执行此操作,但是当尝试通过 ui.R 或 server.R 应用相同的输入时,要么没有任何变化,要么实际文本值更改副标题(工具提示)。

如上所述,我尝试了以下方法: shinyJS: html() shiny: 标签$HTML;标签$正文(标签$脚本()) HTML:在 HTML 文件 (mychange.html) 中添加更改并从 www 采购

要修改的输入(添加工具提示)

pickerInput(
inputid = "ReqTabSel6",
label = '',
choices = c('Choice 1', 'Choice 2', 'Choice 3'),
mulitple = F,
options = list(
style = "btn-info"))

这是正确的功能(当它在 web 检查器下的控制台中运行时会更新):

var addToolTip1 = document.querySelector('#form>div:nth-child(10)>div>div>div>ul>li.selected>a') 
var att = document.createAttribute("title");      
att.value = "I am a tooltip title";                          
addToolTip1 .setAttributeNode(att); 

但是,在 R...

闪亮的JS

server.R
...
observeEvent(input$ReqTabSel6, {
shinyJS::html(id = NULL, 
html = "var addToolTip1 = document.querySelector('#form>div:nth-child(10)>div>div>div>ul>li.selected>a') 
var att = document.createAttribute("title");      
att.value = "I am a tooltip title";                          
addToolTip1 .setAttributeNode(att);",
selector = '#form>div:nth-child(10)>div>div>div>ul>li.selected>a')
})

##This updates the actual 'choice' value from 'Choice 1' to 'Choice1I am a tooltip title')

#Changing html to read:
html = 'title = "I am a tooltip title"',

#This replaces the choice (e.g. Choice 1) value so the drop down now has:

I am a tooltip title
Choice 2 
Choice 3

希望为 pickerInput 选项的每个子项(标签索引)创建工具提示。应该只将“title”属性添加到指定节点内的其他属性。

【问题讨论】:

    标签: javascript r dom shiny


    【解决方案1】:

    知道了!自己回答,以防其他用户遇到此问题。

    #server.R
    observeEvent(input$actionbutton1,{
    shinyjs::html(
    html='<a tabindex="0" class=""...title="Your tooltip here"...></a>',
    add=FALSE,
    selector = '#form>div>form>div>div:nth-child(5)>div>div>div>ul>li:nth-child(4)' #This is the jquerySelector. Note that it will be different for each unique application. You will need to change the 'nth-child(#)' to the specific choice within 'SelectInput' to get a tooltip specific to that choice.)
    })
    

    【讨论】:

      猜你喜欢
      • 2015-12-21
      • 2015-03-24
      • 2019-12-05
      • 1970-01-01
      • 2021-10-11
      • 1970-01-01
      • 2012-01-02
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多