Question

以下在JSFiddle中有效，但在我的网站上使用时它不起作用。

http://jsfiddle.net/jazzviolin/g1t6y71n/

HTML

Event Date:<input type="text" id="date" />
<br />
Event Title:<input type="text" id="header" />
<br />
Description:<input type="text" id="desc"/>
<br />
URL for PDF:<input type="text" id="url_for_pdf" />
<br />
URL for Thumbnail Image:<input type="text" id="url_for_thumb" />
<br />
<button id="create-html">Get Code</button>

<div id="result"></div>

JS

$( "#create-html" ).click(function() {
var date = '<div class="singleevent"><p class="date">' + $("#date").val() + '</p>';
var header = '<p class="header">' + $("#header").val() + '</p>';
var desc = '<p class="desc">' + $("#desc").val() +'</p>';

var url_for_event = '<ul><li><a href="#"><img src="http://www.example.com/-/i/social-mail.png" width="17" height="13" alt=""/></a></li><li><a href="#"><img src="http://www.example.com/-/i/social-fb.png" width="17" height="13" alt=""/></a></li> <li><a href="#"><img src="http://www.example.com/-/i/social-twitter.png" width="16" height="13" alt=""/></a></li><li><a href="' + $("#url_for_pdf").val() +'"><img src="http://www.example.com/-/i/social-download.png" width="13" height="13" alt=""/></a></li></ul><span class="img"><a href="' + $("#url_for_pdf").val() +'"><img src="'+ $("#url_for_thumb").val() + '"" alt=""/></a></span></div>';

$( "#result" ).text(date + header + desc + url_for_event);
});

我意识到其他人已经指出onLoad必须转向NoWrap - in，但我不知道如何将JS转换为使用实时站点。我因缺乏JS知识而提前道歉，我非常感谢你的时间。

Answer 1

首先不要忘记包含jQuery，因为你在JS中使用它。

然后，您可以将JS直接包含在<script></script>标记

内的HTML页面中

Answer 2

我看到有一个jQuery依赖;也许你需要将其添加到HTML中？

https://developers.google.com/speed/libraries/devguide#jquery了解更多信息。

Answer 3

HTML文件中的任何javascript都应包含在<script></script>标记中。此外，您需要包含jQuery库，因为它看起来像您正在使用它，并且可能将您的代码包装在$(document).ready() or similar.

中

我建议你在这里开始学习“安装”/使用jQuery的基础知识：http://www.w3schools.com/jquery/jquery_install.asp

Answer 4

从它的外观来看，您是否在引用JS代码的HTML方面有脚本标记？

将该函数放在.js文件中，通过HTML文档中的<script></script>标记引用它，以便集成和使用它。

并在HTML文档的顶部使用正确的jQuery库。看起来你到了那里并拥有正确的功能/想法，但你需要导入这些东西才能在运行时工作。

Answer 5

确保包含jQuery库。在你的小提琴中你使用2.1，所以尝试将jQuery 2.1包含在你的.html文件中，如下所示：

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

Answer 6

看看你是否有这样的东西并修复你的错误

<强> HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
    <script src="yourscript.js" type="text/javascript"></script>
</head>
<body>
    Event Date:<input type="text" id="date" />
    <br />
    Event Title:<input type="text" id="header" />
    <br />
    Description:<input type="text" id="desc"/>
    <br />
    URL for PDF:<input type="text" id="url_for_pdf" />
    <br />
    URL for Thumbnail Image:<input type="text" id="url_for_thumb" />
    <br />
    <button id="create-html">Get Code</button>
    <div id="result"></div>
</body>
</html>

<强> yourscript.js

$( "#create-html" ).click(function() {
    var date = '<div class="singleevent"><p class="date">' + $("#date").val() + '</p>';
    var header = '<p class="header">' + $("#header").val() + '</p>';
    var desc = '<p class="desc">' + $("#desc").val() +'</p>';

    var url_for_event = '<ul><li><a href="#"><img src="http://www.example.com/-/i/social-mail.png" width="17" height="13" alt=""/></a></li><li><a href="#"><img src="http://www.example.com/-/i/social-fb.png" width="17" height="13" alt=""/></a></li> <li><a href="#"><img src="http://www.example.com/-/i/social-twitter.png" width="16" height="13" alt=""/></a></li><li><a href="' + $("#url_for_pdf").val() +'"><img src="http://www.example.com/-/i/social-download.png" width="13" height="13" alt=""/></a></li></ul><span class="img"><a href="' + $("#url_for_pdf").val() +'"><img src="'+ $("#url_for_thumb").val() + '"" alt=""/></a></span></div>';

    $( "#result" ).text(date + header + desc + url_for_event);
});

Answer 7

如果您正在尝试将小提琴转换为HTML文档，最简单的方法是右键单击Output框架并查看框架源（取决于它可能的浏览器）与众不同;在Chrome上它是View Frame Source）。

这应该会显示您可以复制+粘贴到.html文档中的实际来源。虽然您可能需要删除行<link rel="stylesheet" type="text/css" href="/css/result-light.css">。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by jazzviolin</title>

  <script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>

  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>

  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$( "#create-html" ).click(function() {
    var date = '<div class="singleevent"><p class="date">' + $("#date").val() + '</p>';
    var header = '<p class="header">' + $("#header").val() + '</p>';
    var desc = '<p class="desc">' + $("#desc").val() +'</p>';

    var url_for_event = '<ul><li><a href="#"><img src="http://www.example.com/-/i/social-mail.png" width="17" height="13" alt=""/></a></li><li><a href="#"><img src="http://www.example.com/-/i/social-fb.png" width="17" height="13" alt=""/></a></li> <li><a href="#"><img src="http://www.example.com/-/i/social-twitter.png" width="16" height="13" alt=""/></a></li><li><a href="' + $("#url_for_pdf").val() +'"><img src="http://www.example.com/-/i/social-download.png" width="13" height="13" alt=""/></a></li></ul><span class="img"><a href="' + $("#url_for_pdf").val() +'"><img src="'+ $("#url_for_thumb").val() + '"" alt=""/></a></span></div>';

    $( "#result" ).text(date + header + desc + url_for_event);
});
});//]]>  

</script>


</head>
<body>
  Event Date:<input type="text" id="date" />
<br />
Event Title:<input type="text" id="header" />
<br />
Description:<input type="text" id="desc"/>
<br />
URL for PDF:<input type="text" id="url_for_pdf" />
<br />
URL for Thumbnail Image:<input type="text" id="url_for_thumb" />
<br />
<button id="create-html">Get Code for WordPress</button>

<div id="result"></div>

</body>


</html>

JSFiddle Code to HTML

7 个答案: