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

标签 javascript jquery html css button

警告:第二次发布者,菜鸟开发者。我刚刚完成了 CodeSchool 的“尝试 JQuery”,所以现在我正在尝试使用 HTML/CSS/JS/JQ 的混合构建一个小测验。请原谅任何困惑或偏离规范。我希望很快能到那里!

我试图在单击按钮 时更改类div.questions 中的文本,但没有任何反应。到目前为止,我只在 CodeSchool 上做过这件事,所以这是我第一次尝试自己构建它。据我所知,我的代码是正确的,但像“script src”这样基本的东西是不正确的。我目前正在使用 .text(new text) 方法,也许我应该使用类似 .html(new text)

编辑:澄清 - 我的问题不是这在 JSFiddle 中不起作用。下面的评论说明了原因,非常感谢。但是,我真正的问题是,在将文档本地加载到我的浏览器中时,这不起作用。我正在使用崇高编辑。谢谢。

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?");
    });
});

最佳答案

您需要从 jsFiddle 的 Frameworks and Extensions 选项卡中包含 jQuery,它才会起作用。

Updated Fiddle

关于javascript - 使用 JS/JQ 单击按钮时更改 DIV 文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23189475/

相关文章:

javascript - 简单模态不会显示

javascript 数组不确定属性 array[index] = true/false

javascript - CSS动画没有动画

javascript - jQuery 中的隐藏/显示功能出现问题

javascript - 使用 .prop() 创建全选复选框,但不希望删除该复选框

jquery - 选择具有一定内容的元素作为直接子节点

javascript - 脚本中的 Angular Scope

jquery - 覆盖 jquery 移动按钮边距

javascript - 在 jQuery 中使用 $ ('body' ).html ('' ) 是什么意思?

javascript - 我需要更改具有相同 id 的多个 <td> 的 css 样式