Question

我有一个完成的JQuery，可以通过鼠标操作来移动360°对象（图片）。

该代码有效：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery j360 Plugin Demo</title>
<script src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/j360.js" ></script>
</head>
<body>
<div class="jquery-script-clear"></div>
<h1 style="margin-top: 150px;">jQuery j360 Plugin Demo</h1>
<script type="text/javascript">
            jQuery(document).ready(function() {
                jQuery('#product').j360();
            });
</script>
<center>
<div id="product" style="width: 1920px; height: 1080px; overflow: hidden;"> 
<img src="v/1.png" /> 
<img src="v/2.png" /> 
<img src="v/3.png" /> 
<img src="v/4.png" /> 
<img src="v/5.png" /> 
</div>
</center>
</body>
</html>

所需的图片是根据需要从服务器接收的，因此我必须在收到图片后按需创建此代码。因此，我使用document.write命令-我知道它们不是最佳实践，但通常可以正常工作……无论如何，这是我使用的代码-基本相同（即使在调试时，我也无法找到区别创建HTML到“原始” HTML）

所以基本上就是这样：

<button id="click1" onclick="myFunction()">click me</button>

<script>
function myFunction() {
document.writeln('<html>');
document.writeln('<head>');
document.writeln('<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">');
document.writeln('<title>jQuery j360 Plugin Demo</title>');
document.write('<scr');
document.write('ipt src="js/jquery-1.4.4.min.js"></scr');
document.write('ipt>');
document.write('<scr');
document.write('ipt type="text/javascr');
document.write('ipt" src="js/j360.js" ></scr');
document.writeln('ipt>');
document.writeln('</head>');
document.writeln('<body>');
document.writeln('<div class="jquery-script-clear"></div>');
document.write('<scr');
document.writeln('ipt type="text/javascript">');
document.write('            jQuery(document).ready(func');
document.writeln('tion() {');
document.write("                jQuery('");
document.write('#');
document.writeln("product').j360();");
document.writeln('            });');
document.write('</scr');
document.writeln('ipt>');
document.writeln('<center>');
document.writeln('<div id="product" style="width: 960px; height: 540px; overflow: hidden;">'); 
document.write('<img src="images/01.jpg" />');
document.write('<img src="images/02.jpg" />');
document.write('<img src="images/03.jpg" />');
document.writeln('</div>');
document.writeln('</center>');
document.writeln('</body>');
document.writeln('</html>');
}
</script>

创建的HTML显示图片，但jQuery插件不起作用。 JS是一样的。

感谢您的帮助！

Answer 1

document.write会覆盖您拥有的所有代码。

示例：

function overwrite() {
  document.write("Oops, I've overwritten the code!");
}

<!doctype html>
<html>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <button onclick="overwrite()">Click me!</button>
</body>

</html>

Document.write创建的脚本不起作用

1 个答案: