Question

为什么这段代码不起作用？我只是无法理解，我花了几个小时在这上面，我仍然无法找到我的错误，它适用于jsfiddle，从来没有与我和我的网站合作。在jsfiddle jsfiddle

我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>My site</title>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
// mouse-on examples
$('#mouseon-examples div').data('powertipjq', $([
    '<p><b>Here is some content</b></p>',
    '<p><a href="http://stevenbenner.com/">Maybe a link</a></p>',
    '<p><code>{ placement: \'e\', mouseOnToPopup: true }</code></p>'
    ].join('\n')));
$('#mouseon-examples div').powerTip({
    placement: 'e',
    mouseOnToPopup: true
});


</script>
</head>

<body>

<div id="mouseon-examples">dfgdg</div>

</body>
</html>

<style type="text/css">
#mouseon-examples div {
    background-color: #EEE;
    text-align: center;
    width: 200px;
    padding: 40px;
}

</style>

Answer 1

您必须在jsfiddle中启用文档onLoad选项（编辑：实际上你这样做），

如果是这样，你需要把它放在你的代码中：

$(function(){
$('#mouseon-examples div').data('powertipjq', $([
    '<p><b>Here is some content</b></p>',
    '<p><a href="http://stevenbenner.com/">Maybe a link</a></p>',
    '<p><code>{ placement: \'e\', mouseOnToPopup: true }</code></p>'
    ].join('\n')));
$('#mouseon-examples div').powerTip({
    placement: 'e',
    mouseOnToPopup: true
});
})

- 编辑 -

似乎您忘记了CSS，将其添加到html <head>

<link rel="stylesheet" type="text/css" href="http://stevenbenner.github.com/jquery-powertip/styles/jquery.powertip.css">

- 编辑 -

整个代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>

    <title>My site</title>

    <link rel="stylesheet" type="text/css" href="http://stevenbenner.github.com/jquery-powertip/styles/jquery.powertip.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript">
    // mouse-on examples
    $(function(){
        $('#mouseon-examples div').data('powertipjq', $([
            '<p><b>Here is some content</b></p>',
            '<p><a href="http://stevenbenner.com/">Maybe a link</a></p>',
            '<p><code>{ placement: \'e\', mouseOnToPopup: true }</code></p>'
            ].join('\n')));
        $('#mouseon-examples div').powerTip({
            placement: 'e',
            mouseOnToPopup: true
        });
        })


    </script>
<style type="text/css">
    #mouseon-examples div {
        background-color: #EEE;
        text-align: center;
        width: 200px;
        padding: 40px;
    }

    </style>
    </head>

    <body>

    <div id="mouseon-examples">dfgdg</div>

    </body>
    </html>

Answer 2

$(document).ready(function(){
    $('#mouseon-examples div').data('powertipjq', $([
        '<p><b>Here is some content</b></p>',
        '<p><a href="http://stevenbenner.com/">Maybe a link</a></p>',
        '<p><code>{ placement: \'e\', mouseOnToPopup: true }</code></p>'
        ].join('\n')));
    $('#mouseon-examples div').powerTip({
        placement: 'e',
        mouseOnToPopup: true
    });
});

很讨厌，它每次都在jsfiddle上工作，而不是在我的网站上

2 个答案: