javascript - 如何在 colorbox 中显示一个 div - Jquery 插件

Question

我想在 Colorbox 插件中显示一个 div，但它不起作用，因为 div 元素中有很多双引号并且会导致问题，所以我该怎么做。

这是我的代码

<script>
        $(document).ready(function() {
        if(localStorage.getItem('welcomehelloState') != 'shown'){
        function openColorBox(){
                $.colorbox({transition: "fade", top: "2%", width:"67%", height:"17%", html: "<section class="related">
    <p>New Content:-</p>
    <a href="/part-2/index>
        <img src="img/related/Prdha.png" />
        <h3>Art</h3>
    </a>
    <a href="/part-2/index6">
        <img src="img/related/Kavi.png" />
        <h3>Games</h3>
    </a>
    </section>"});
                               }
        setTimeout(openColorBox, 100);
        localStorage.setItem('welcomehelloState','shown')
        };});
</script>

如您所见，有很多双引号，括号不同步。

Answer 1

问题是，当你用双引号 (") 开始一个字符串并在字符串中放置另一个引号时，JS 认为你结束了字符串。这就是为什么必须在字符串中的引号有要转义:\"

示例:var x = "En then he said:\"Hi there\", with a big smile";

此外，JS 不喜欢换行符。如果你非常需要它，你也必须转义它们，但更好的方法是将字符串分成多个字符串

例子:

var x = "this is" +
"A multiline" + 
"String.";

你的代码必须是这样的:

<script>
    $(document).ready(function() {
        if(localStorage.getItem('welcomehelloState') != 'shown'){
            function openColorBox(){
                $.colorbox({transition: "fade", top: "2%", width:"67%", height:"17%", html: "<section class=\"related\">" +
                "<p>New Content:-</p>" +
                "<a href=\"/part-2/index\">" +
                        "<img src=\"img/related/Prdha.png\" />" +
                        "<h3>Art</h3>" +
                        "</a>" +
                        "<a href=\"/part-2/index6\">" +
                        "<img src=\"img/related/Kavi.png\" />" +
                        "<h3>Games</h3>" +
                        "</a>" +
                        "</section>"});
            }
            setTimeout(openColorBox, 100);
            localStorage.setItem('welcomehelloState','shown')
        }
    });
</script>