这个简单的jQuery悬停并替换HTML函数有什么问题

Question

var originalContentFirst = $('#first').html();
$('#first').hover(function() {
     $('#first').html('<strong>New HTML</strong>');   
}, function() {
     $('#first').html(originalContentFirst); 
});

var originalContentSecond = $('#second').html();
$('#second').hover(function() {
     $('#second').html('<strong>New HTML</strong>');   
}, function() {
     $('#second').html(originalContentSecond); 
});

var originalContentThird = $('#third').html();
$('#third').hover(function() {
     $('#third').html('<strong>New HTML</strong>');   
}, function() {
     $('#third').html(originalContentThird); 
});

var originalContentFourth = $('#fourth').html();
$('#fourth').hover(function() {
     $('#fourth').html('<strong>New HTML</strong>');   
}, function() {
     $('#fourth').html(originalContentFourth); 
});

This was copied and adapted from elsewhere on this website. 该文件已从本网站上的其他地方复制并改编。 As you can see, its function is pretty basic. 如您所见，它的功能非常基本。 I have 4 divs (terrible ids, I know), and on a hover it should replace the HTML in them with the new HTML. 我有4个div（我知道这是糟糕的ID），并且在悬停时应将其中的HTML替换为新的HTML。 Any idea why this is not doing anything at all? 知道为什么它什么都不做吗？ I'm sure I'm missing something rather elementary, but I can't figure out what the hell it is? 我确定我缺少一些基本知识，但我不知道这到底是什么？

Edit: full HTML 编辑：完整的HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Bio</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script language="Javascript" type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <div id=first>
     <span>About Me</span>
    </div>
    <div id=second>
      <span>Past Jobs</span>
    </div>
    <div id=third>
      <span>Projects</span>
    </div>
    <div id=fourth>
      <span>About</span>
    </div>


  </body>
</html>

Answer 1

As Jaromanda X said - you're loading the script ABOVE the html, therefore it has nothing to attach to. 正如Jaromanda X所说-您正在html之上加载脚本，因此没有附加内容。

$(function() { // this waits until all html loaded

    var originalContentFirst = $('#first').html();
    $('#first').hover(function() {
         $('#first').html('<strong>New HTML</strong>');   
    }, function() {
         $('#first').html(originalContentFirst); 
    });

    var originalContentSecond = $('#second').html();
    $('#second').hover(function() {
         $('#second').html('<strong>New HTML</strong>');   
    }, function() {
         $('#second').html(originalContentSecond); 
    });

    var originalContentThird = $('#third').html();
    $('#third').hover(function() {
         $('#third').html('<strong>New HTML</strong>');   
    }, function() {
         $('#third').html(originalContentThird); 
    });

    var originalContentFourth = $('#fourth').html();
    $('#fourth').hover(function() {
         $('#fourth').html('<strong>New HTML</strong>');   
    }, function() {
         $('#fourth').html(originalContentFourth); 
    });

}); // this closes it

这个简单的jQuery悬停并替换HTML函数有什么问题

问题描述

1 个解决方案

解决方案1
0 2016-02-20 07:26:11

这个简单的jQuery悬停并替换HTML函数有什么问题

问题描述

1 个解决方案

解决方案1 0 2016-02-20 07:26:11

解决方案1
0 2016-02-20 07:26:11