如何在内联JavaScript函数中转义引号

Question

如何在内联JavaScript函数中转义引号

3

我的函数在不使用附加的 div 类时运行得很完美，但是当我尝试在元素上添加一个 class 时它无法工作。

<head>
    <script type="text/javascript">
        function showt(id){
            $('body').append(id)
        }
    </script>
</head>

<body>
    <a href="#" id="hidemain" onmouseover='showt("<div class='sdf'>appended</div>")'>show detail</a>
</body>

- jchand

1

为什么不在你的脚本中绑定事件处理程序，而不是直接在元素上进行内联绑定？ - James Allardice

1

这里的变量名'id'并不是很准确。 - A. Wolff

有人能告诉我如何从这个函数中获取pageX吗？ - jchand

@jchand，pageX是什么？你的代码中没有指定。 - Rory McCrossan

5个回答

6

既然您在问题中标记了jQuery，那么这里是使用mouseover处理程序而不是onmouseover属性的jQuery版本，它完全取消了引号的转义。

<head>
    <!-- include jquery.js here -->
    <script type="text/javascript">
        $(function() {
            $('#hidemain').mouseover(function() {
                showt('<div class="sdf">appended</div>');
            });
        });

        function showt(id){
            $('body').append(id)
        }
    </script>
</head>

<body>
    <a href="#" id="hidemain">show detail</a>
</body>

- Rory McCrossan

我刚刚发布了相同的答案，该死.. :-) - TryingToImprove

2

如果您已经在使用jQuery，那么您可以这样做：

$(function() {
    function showt(domElement){
        $('body').append(domElement)
    }

    $("#hidemain").mouseover(function() {
        showt($("<div />").addClass("sdf").text("test"));
    });
})

- TryingToImprove

1

您需要使用\转义嵌入的引号：

<a href="#" id="hidemain" onmouseover='showt("<div class=\"sdf\">appended</div>")'>show detail</a>

请注意，我还将内部引号更改为双引号并对其进行了转义，因为如果外部引号围绕着一个HTML元素属性，即使转义也可能无法使用相同类型的引号。

- nnnnnn

1

你可以试试这个：

onmouseover='showt("<div class=\'sdf\'>appended</div>")'

这些引号需要转义'\'。

- Jai

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sirko · Accepted Answer

当在引号内部使用引号时，只需转义引号即可。同样，在属性中只需使用相应的另一种引号。因此，如果您将属性包含在"中，则在其中使用'和\'，反之亦然。(感谢@nnnnnn提出这个建议！)

<a href="#" id="hidemain" onmouseover="showt('<div class=\'sdf\'>appended</div>')">show detail</a>

或者

<a href="#" id="hidemain" onmouseover='showt("<div class=\"sdf\">appended</div>')">show detail</a>

编辑

为了获取事件对象，您应该像这样通过编程方式添加事件处理程序：

<a href="#" id="hidemain">show detail</a>
<script>
  document.getElementById( 'hidemain' ).addEventListener( 'click', function( event ) {
    showt( '<div class="sdf">appended</div>' );
    // here you have access to event and thus event.pageX
  });
</script>