Question

这似乎很容易做到。但是，我无法使其工作....！太沮丧了...

我搜索了这个问题，并试图解决了几个小时。（我在StackOverflow上阅读了许多文章。）但是，我仍然无法解决此问题...

以下帖子涵盖了类似的问题。因此，我尝试通过尝试帖子中的答案来解决我的问题。但是，对我没有任何帮助...

在阅读完本章{jquery fadeIn not working）之后，我尝试了.hide()。
：没用...
阅读了此内容{jQuery animations: fadeIn() hidden div, not showing content）之后，我尝试了fadeIn().removeId('tutorialPages')
：没用...
我还尝试了display:none中的CSS而不是.hide()中的JS。
：没用...

请记住： 如果您认为它是另一个问题的重复，请告诉我哪个问题以及如何将该问题的解决方案应用于我的问题。我是JavaScript新手，我仍然很难将适用于相同/相似问题的解决方案应用于我的问题。提前致谢！：-）

我正在使用Bootstrap 4.1.2.和jQuery 3.3.1。
（*在以下代码片段中看不到我使用Bootstrap的部分。）

错误消息：
我在JSFiddle中编写此代码时没有看到此错误消息。但是，在此代码段中，单击Press this!时将显示以下代码："message": "Uncaught TypeError: $(...).fadein is not a function"。

我要做什么：
1.加载页面时，仅显示Press this!。
2.单击Press this!时显示第一句。
3.单击第一句时显示第二句。
4.单击第二句时显示第三句。
5.单击第三个句子时显示第四个句子。

$(document).ready(function(){

  $("#tutorialPages").hide();

  $('#test').click(function(){
    $("#tutorialFirst").fadein();
  });
  
  $('#tutorialFirst').click(function(){
    $("#tutorialSecond").fadein();
  });
  
  $('#tutorialSecond').click(function(){
    $("#tutorialThird").fadein();
  });
  
  $('#tutorialThird').click(function(){
    $("#tutorialFourth").fadein();
  });
  
});

/* #tutorialPages{
  display: none; 
}  
 */
#tutorialGreen{
  color:black;
  font-weight: bold;
  font-size: 30px;
}

<!DOCTYPE html>
<html lang="en">
<head>
   <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 4.1.x -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

    <!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

    <script type="text/javascript" src="script.js"></script>

</head>
<body>
  
  <p id="test">Press this!</p>


<div id="tutorialPages">
  <p id="tutorialFirst">This is 1st sentence.</p>
  <p id="tutorialSecond">This is 2nd sentence.</p>
  <p id="tutorialThird">This is 3rd sentence.</p>
  <p id="tutorialFourth">This is 4th sentence.</p>
</div>

</body>

Answer 1

您隐藏了父元素-$("#tutorialPages")，因此它的子元素将发生什么无关紧要，也不会显示。

$("#tutorialPages")应该始终显示，并且仅显示/隐藏子元素，或者将$("#tutorialPages").show()添加到第一次单击事件。

Answer 2

应为.fadeIn()，大写字母I

jQuery fadein（）无法与hide（）和display一起使用：无

2 个答案: