HTML:将字符串嵌套在属性的字符串中

问题描述

我的网站包含带有HTML代码的引导程序弹出窗口.这样的弹出窗口看起来像这样(为了可读性，我已经代替了弹出HTML放置了一个占位符):

My website contains bootstrap popovers with HTML code. Such a popover looks like this (instead of the popup HTML, I've put in a placeholder for readability):

<mark data-content="Fancy HTML here" data-html="true" data-toggle="popover">
    This mark has a popover
</mark>

在data-content中插入真实HTML会引起正确转义引号的问题.我发现了这个问题，看起来像是一个完全重复的问题:如何为Bootstrap popover和tooltip编码html内容

Inserting real HTML in the data-content brings up the problem of escaping quotes properly. I found this question, which looks like an exact duplicate:How do I encode html for Bootstrap popover and tooltip content

可接受的答案建议将引号转义为"这是行不通的，转义的引号未正确解析.我在这个小提琴中设置了一个示例: https://jsfiddle.net/z4t2sud3/3/

The accepted answer recommends to escape quotes to "This doesn't work, the escaped quotes are not parsed properly. I've set up an example in this fiddle: https://jsfiddle.net/z4t2sud3/3/

另一种选择是对弹出式窗口中的字符串使用单引号'.此选项也处于摆弄状态，并且可以正常工作.

Another option is to use single quotes ' for strings inside the popup. This option is also in the fiddle and it works properly.

但是，如果我想嵌套得更深，该怎么办?例如，我插入到data-content中的HTML也可能包含弹出窗口.尽管这似乎是一个非常糟糕的设计构想，但使它正常工作会很好.

But what if I want to nest deeper? For example, the HTML that I insert into the data-content could contain popovers, too. While this seems like a very bad design idea, it would be nice to make it work.

这里是双重嵌套弹出窗口的提琴手: https://jsfiddle.net/cwz3sayj/3/

Here is a fiddle for the double-nested popover: https://jsfiddle.net/cwz3sayj/3/

推荐答案

希望下面的代码段看起来像您想要的那样，您可以在创建弹出框实例时传递一个选项，在该实例中设置将要在实例上显示的内容点击.由于第一次运行脚本时DOM中不存在第一级，因此您必须在单击第一个弹出窗口后激活第二个弹出窗口.使用模板文字，您可以在编写的html代码中使用撇号或引号.

Hoping the snippet below looks like what you wanted, you can pass an option while creating a popover instance where you set the content that will be showed when the instance is clicked. Since the first level isn't present in the DOM when you first run the script, you have to activate the second popover after the first one has been clicked. Using template literals, you can use either apostrophe or quotation mark in the html code you're writing.

$('#firstPopover')
    .popover({
        html: true,
        content: `<button id="secondPopover" class="btn">
                      Goto second level
                  </button>`
    })
    .on('shown.bs.popover', function() {
        $('#secondPopover').popover({
            html: true,
            content: `This is the last level`
        });
    });

<br />
<button id="firstPopover" data-html="true" class="btn">
  Goto first level
</button>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

现在唯一的问题是第一层在第二层之前关闭.

The only problem is see right now is when the first layer is closed before the second one.

这篇关于HTML:将字符串嵌套在属性的字符串中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！