用javascript中的随机单词替换段落标签内容

Replacing paragraph tag contents with a random word from javascript

本文关键字：段落 标签 替换 单词 javascript 随机      更新时间：2023-09-26

当用户进入页面时，我希望一个div在中心有一个标题，下面是一个引号，从列表和按钮随机选择进入网站。这一切都很好，但我似乎无法让按钮在主站点和登陆div中淡出。这里是一个尝试并帮助解释更多事情的jsfiddle。

JSFIDDLE

你可能会说，我不是很擅长JavaScript或jquery，到目前为止，我所做的只是通过代码示例学习一些零碎的东西和浏览网页

我不明白为什么它不能工作，因为我在jsfiddle中玩了一个简化版本的我想做的事情，它工作了。

简化版

下面的代码是简化版本(它不会让我不添加代码发布?)

HTML 

<div class="landingDiv">
    <h1>LANDING DIV</h1>
    <button id="showMain">Enter Site</button>
</div>
<div class="main">
    <h1>Main Site</h1>
</div>
JQUERY 

$("#showMain").click(function () {
    $(".main").fadeIn(1000);
    $(".landingDiv").fadeOut(1000);
});
CSS 

.main {
display: none;
opactiy: 0;
}

Thanks in advanced.

史蒂夫。

第一个jQuery示例抛出了一个错误:

$ is not defined

表示未定义/包含jQuery。但事实并非如此。但是在第二个jsFiddle中，您包含了jQuery。

你会注意到在jsfiddle的左侧，你会看到在Framewords &Extensions"的标题，你可以包括一个框架-所以，包括jQuery!

这里是更新的小提琴与jQuery包括:http://jsfiddle.net/6cGHF/1/

当您在JavaScript开发中前进时，当发生意想不到的事情时，检查浏览器开发人员工具是否存在错误总是一个好主意。它总是帮助你，当你在StackOverflow上提问时，提供这些错误可以帮助我们!:)

Chrome中开发人员工具的快捷方式是F12 -如果你有错误，你可以看到一个带有X的小红圈-点击它获取更多信息。但是开发者工具也可以在其他主流浏览器(IE8及以下版本除外)中使用。

编辑:

将click()事件函数封装在$(document).ready()中

$(document).ready(function() {
    $("#showMain").click(function () {
        $(".main").fadeIn(1000);
        $(".landingDiv").fadeOut(1000);
    });
});

发生的事情是你的HTML文件是从上到下读取的。所以它会在#showMain元素被读取之前到达click函数。所以，jQuery找不到它。

这在jsFiddle中不是问题的原因是因为所有的JavaScript代码都被包装在一个"onLoad"函数中(诚然，这与$(document).ready()有点不同)，但它通过在所有内容都已经加载后执行JavaScript来解决这个问题。你可以看到，在我上面链接的小提琴的左手边，你会发现一个选中了"onLoad"的下拉菜单。在其中，您还可以选择"OnDomready"(这相当于$(document).ready())

在简介:

  • 不要使用$(document).ready()在jsFiddle。你不需要它。
  • DO使用$(document).ready()围绕javascript，依赖于事实，DOM是准备好了(即。

问题在你的小提琴是你没有添加jQuery所以当你尝试引用它与'$'，一个javascript错误被抛出。只需将引用添加到jQuery库中，您的小提琴就可以在单击按钮时淡出按钮。

你的问题:

1)添加jQuery库到你的小提琴

2)将opacity:0;从CSS的。main中移除。display:none;是足够的。

3)使用这个来淡出/在元素:

$("#showMain").click(function () {
    $(".landingDiv").fadeOut(1000, function () {
        $(".main").fadeIn(1000);
    })
});
相关文章：