javascript 在WordPress插件的jQuery字符串中插入HTML标记

bksxznpy  于 2023-09-29  发布在  Java
关注(0)|答案(1)|浏览(108)

我有一个问题,我们正在使用一个MapWordPress插件,它看起来像这样的前端

我的客户想要的是把括号(和里面的单词)变小。
这是后端的Map代码

{
"mapwidth": "980",
"mapheight": "600",
"action": "tooltip",
"fillcolor": "#343f4b",
"maxscale": "3",
"customcss": ".mapplic-portrait .mapplic-sidebar{\n\tmin-height: 360px; }\n",
"fullscreen": false,
"hovertip": true,
"hovertipdesc": false,
"smartip": false,
"deeplinking": true,
"linknewtab": false,
"minimap": true,
"animations": false,
"zoom": true,
"zoombuttons": true,
"clearbutton": true,
"zoomoutclose": false,
"closezoomout": false,
"mousewheel": true,
"mapfill": false,
"sidebar": true,
"search": false,
"searchdescription": false,
"alphabetic": true,
"thumbholder": false,
"sidebartoggle": false,
"filtersopened": false,
"highlight": false,
"levels": [
    {
        "id": "usa",
        "title": "USA",
        "map": "//website.com/wp-content/plugins/mapplic/maps/usa.svg",
        "minimap": "http://website.com/wp-content/plugins/mapplic/maps/usa-mini.jpg"
    }
],
"styles": [],
"categories": [],
"locations": [
    {
        ... other details removed
    },
    {
        "title": "NY [Westchester County] = ConEdison",
        "id": "nyc2",
        "pin": "hidden",
        "link": "/residential/nyc/",
        "action": "open-link",
        "x": "0.8833",
        "y": "0.3156",
        "level": "usa",
        "color": "#343f4b"
    }
]

}
我想达到的是这样的东西;

{
        "title": "NY <span class="\bracket\">[Westchester County]</span> = ConEdison",
        "id": "nyc2",
        "level": "usa",
        "color": "#343f4b"
    }

我想将一个类添加到一个括号中,以便可以操作其样式。

**[update]**下面是如果我在标题中添加span会发生的情况:

**[更新2]**是的,它被视为文本。并且在plugin中没有其他选项来改变或添加样式到该行中的任何措辞。

最好的方法是什么?我怎么能让这成为可能?我对JavaScript或jQuery的了解有限。我将感谢你的答复。
先谢谢你了。

ruyhziif

ruyhziif1#

似乎Map库正在将内容呈现为文本。您可以在生成Map后强制将其呈现为html。正如我所检查的,这些元素在标签中,所以我将h4文本转换为HTML。如果h4还不够,你可以更具体地说:

var h4Elements = document.querySelectorAll('h4');

// Loop through each h4 element
for (var i = 0; i < h4Elements.length; i++) {
  var h4Element = h4Elements[i];
  
  // Get the existing text content of the h4 element
  var existingText = h4Element.textContent;

  // Update the content to include the HTML span tags
  h4Element.innerHTML = existingText; // This will replace the text with HTML
}

相关问题