时间戳

首页 > 解决方案 > 如何修复'setAttributeNode（att）'以添加属性副修改现有？

javascript - 如何修复'setAttributeNode（att）'以添加属性副修改现有？

问题描述

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

如上所述，我尝试了以下方法： shinyJS: html() shiny: tags$HTML; tags$body(tags$script()) 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 选项的每个子项（选项卡索引）创建工具提示。应该只将“标题”属性添加到指定节点内的其他属性。

标签： javascriptrdomshiny

解决方案

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

#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.)
})

推荐阅读