Question

我有这个代码，当它悬停时会显示不同的文字，但似乎无法让它工作。

$('a.spoiler').hover(function() {
  var text = $(this).text();
  var content = $(this).attr("content");
  $(this).text(content).attr("content", text)
});

HTML Page Head中的内容。

和HTML

<!DOCTYPE HTML>
<html>
  <head>
    <script src="js/jquery.min.js"></script>        
    <script>    
      //Spoiler hiding
      $('a.spoiler').hover(function() {
        var text = $(this).text();
        var content = $(this).attr("content");
        $(this).text(content).attr("content", text)
      });
    </script>       
  </head>   
  <body>
    <a href="" onclick="return false" class="spoiler" content="Winner">
      Reveal
    </a>
  </body>
</html>

但我似乎无法让它发挥作用。

任何想法

Answer 1

您正尝试在页面上加载元素之前附加事件。确保使用文档就绪/加载功能加载元素，然后附加事件：

 $(function(){
   $('a.spoiler').hover(function(){
        var text = $(this).text();
        var content = $(this).attr("content");
        $(this).text(content).attr("content", text)
    });
 });

<强> Working Demo

Answer 2

基于@ karthikr的回答：您的代码当前的方式是将侦听器附加到解释此代码时不存在的元素。

将代码包装成

$(document).ready(function(){
  // your code
}

确保在执行脚本之前解释html，从而确保要附加处理程序的元素确实存在。

jQuery调用没有被触发

2 个答案: