Question

警告：第二次海报，菜鸟开发者。我刚刚完成了CodeSchool＆＃34;尝试JQuery，＆＃34;所以现在我尝试使用HTML / CSS / JS / JQ混合构建一个小测验。请原谅任何snafus或strayings-from-norms。我希望很快就能在那里生活！

点击按钮时，我尝试更改班级 div.questions 中的文字，但没有发生任何事情。到目前为止，我只在CodeSchool上做过这个，所以这是我第一次尝试自己构建它。据我所知，我的代码是正确的，但是基本的和＃34;脚本src＆＃34;是不正确的。我目前正在使用 .text（新文字）方法，也许我应该使用 .html（新文字< / EM>）？

编辑：澄清 - 我的问题不是这在JSFiddle中不起作用。下面的评论显示了为什么会这样，所以感谢你。但是，我真正的问题是，在将文档本地加载到浏览器中时，这不起作用。我使用Sublime Edit。感谢。

JSFiddle：http://jsfiddle.net/Ever/jvNf8/

HTML：

<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="jquery.min.js"></script> <title>Tim's JS Quizlet!</title> </head> <body> <h2>JS and JQuery Quiz</h2> <div class="intro"> Welcome! When the button at the bottom is clicked, the question in the box below will change to the next question, and the answer choices below will change to the respective choices. <br> </div> <br> <div class="questions">Ready?</div> <br> <input type="radio" id="radio1" name="radios"> Yes</br> <input type="radio" id="radio2" name="radios"> No</br> <input type="radio" id="radio3" name="radios"> Wat</br> </br> <button>Submit</button> </body>

CSS：

div.intro{ font-weight: bold; width: 50%; } div.questions{ width: 500px; height: 100px; border: 1px solid black; padding: 5px; }

JS：

$(document).ready(function(){ $('button').on('click', function(){ $('.questions').text("What's your favorite color?"); }); });

Answer 1

您需要在jsFiddle的Frameworks and Extensions标签中包含jQuery，它才能正常运行。

<强> Updated Fiddle

Answer 2

包含jQuery库并将您的脚本更改为：

$(document).ready(function(){ 
    $('button').click(function(){
        $('.questions').html("What's your favorite color?");
    });
});

FIDDLE

Answer 3

使用

button:action
{
//<how you want it changed here>//
}

在你的CSS中。

Answer 4

它运作得很好。

问题是你正在使用JSFiddle并且你还没有包含jQuery。您可以在左侧的Frameworks & Extensions平底锅中执行此操作。

Answer 5

将代码放在“head”标签中：

 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 <script>
    $(document).ready(function(){ 
       $('button').click(function(){
         $('.questions').html("What's your favorite color?");
       });
    });
 </script>

在使用jquery函数之前，需要提供jquery lib的引用。

使用JS / JQ单击按钮时更改DIV文本

5 个答案: