2

First and foremost, I apologize in advance for the ignorance on my part - I do not know JavaScript at all and I am somewhat new to Stackoverflow and jsFiddle. I did my homework and was able to get the functionality working on jsFiddle, but now (what should be the easy part) I cannot apply it to my HTML code. The working code is here: http://jsfiddle.net/8p7J2/354/

Now that I have all the code I need (I'll add more styles later), how do I apply the JavaScript to the HTML? I tried this with no success:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Walser Rewards - Contact Us</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="contact.js" type="text/javascript"></script>
</head>

Should it be in the header, right after/before the form, just before the /body tag, or somewhere else?

4

5 回答 5

4

工作代码（演示）中的源代码使用 jQuery 库，因此，您必须将其包含在文档中。后<link href="styles.css" rel="stylesheet" type="text/css" />

添加下面的行。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

于 2013-05-10T19:24:48.693 回答
2

关键是，在呈现 HTML 元素之前加载脚本。如果您有代码contact.js，请将其包装在$(document).ready()：

$(document).ready(function() {
    $("#member,").css("display","none");

    var showTop = $.cookie('showTop');
    if (showTop == 'expanded') {
      $("#member").show("fast");
      $('input[name=mbr]:checked');
    } else {
      $("#member").hide("fast");
      $('input[name=mbr]:checked');
  }
});

$(".mbr-yn").click(function(){
    if ($('input[name=mbr]:checked').val() == "Yes") {
        $("#member").slideDown("fast"); //Slide Down Effect
        $.cookie('showTop', 'expanded'); //Add cookie 'ShowTop'
    }
    if ($('input[name=mbr]:checked').val() == "No"){ 
        $("#member").slideUp("fast");  
        $.cookie('showTop', 'collapsed'); //Add cookie 'ShowTop'
    }
 });

并且不要忘记在您的脚本之前包含 jQuery 库：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
于 2013-05-10T19:26:31.933 回答
2

首先，很棒的工作！您所做的事情有一些小问题可能是原因。您实际上必须确保在使用 jQuery 功能时包含 jQuery。您可以通过在拉入您的contacts.js 文件之前包含此行来添加它。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

这将设置 $ 说这是 jQuery。一旦你这样做了，你必须确保它在 jQuery 完全加载之前不会尝试运行你的代码。为此，请将其放在您的 contacts.js 文件的开头。

$( document ).ready(function() {

然后在底部。

});

该包装器只是告诉页面在所有内容正确加载之前不要调用您的函数。希望这可以帮助！并且毫不犹豫地提出问题:)

于 2013-05-10T19:28:08.630 回答
-1 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Walser Rewards - Contact Us</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="contact.js" type="text/javascript"></script>
<script type="text/javascript>
put your jsfiddle javascript code here
</script>
</head>
<body>
put your jsfiddle html code here
</body>
</html>
于 2013-05-10T19:22:36.163 回答
-1

我会将它放在脚本块内的立即函数中，就在结束正文标记之前，以便它在页面内容加载后运行：

<script>

$(function() { 

/* in here */ 

}); 

</script>
于 2013-05-10T19:25:28.997 回答