Question

首先，我为极其基本的问题道歉。我是一个完整的新手，在没有任何外界帮助的情况下自学。要温柔。

我正在通过免费的web开发课程完成练习，其中一个步骤是使用jQuery为一些div添加背景颜色。我使用了.hover和.mouseover两种方法，但两种方法都没有。如果我将代码放在$（document）.ready括号之外，则没有任何反应。如果我把代码放在里面，我的所有工作都会被删除。

以下是代码：

$(".pixel").hover(function(){
  $(this).css("background-color", "yellow");
}, function() {
  $(this).css("background-color", "red");
});

在$（document）.ready函数中，我用class =＆＃34; pixel＆＃34;创建了很多div，所以我想我应该能够使用上面的代码选择它们。

编辑：

再次，我很抱歉，似乎我没有提供足够的信息。这实际上是我在这里发布内容的第一次尝试。我没有人可以问这些问题。

这是我的.js文件的开头，在我尝试运行的.hover代码之前：

$(document).ready(function() {
  $("body").append("<div id='main'>");
  for (var i=0; i<256; i++) {
    $("#main").append("<div class='pixel'></div>");
  };
  $(".pixel").last().append("</div>");
});

Answer 1

两个选项 - 您可以在创建元素后初始化hover事件，或者甚至更好，您可以使用jQuery .on('mouseover')和.on('mouseout')并在创建元素之前初始化事件：

＆＃13;

$(document).on("mouseover", ".pixel", function() {
  $(this).css("background-color", "yellow");
}).on("mouseout", ".pixel", function() {
  $(this).css("background-color", "red");
});

$("body").append("<div id='main'>");

for (var i = 0; i < 256; i++) {
  $("#main").append("<div class='pixel'></div>");
};

＆＃13;

.pixel {
  border: 1px solid #000;
  display: inline-block;
  width: 10px;
  height: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

或者，版本仍然使用简写hover：

＆＃13;

$("body").append("<div id='main'>");

for (var i = 0; i < 256; i++) {
  $("#main").append("<div class='pixel'></div>");
};

$(".pixel").hover(function() {
  $(this).css("background-color", "yellow");
}, function() {
  $(this).css("background-color", "red");
});

＆＃13;

.pixel {
  border: 1px solid #000;
  display: inline-block;
  width: 10px;
  height: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

问题是你要追加你想要悬停的元素。因为它不是页面加载时DOM的一部分，所以事件绑定不会像你拥有它那样工作。而是使用：

$(document).ready(function(){
  $("body").append("<div id='main'>"); 
  for(var i=0; i<256; i++) { 
    $("#main").append("<div class='pixel'>Pixel</div>");
  };
  $(".pixel").last().append("</div>");
});

// Change BG on hover
$(document).on({
    mouseenter: function(){
      $(this).css("background-color", "yellow");
    },
    mouseleave: function(){
      $(this).css("background-color", "red");
    }
}, '.pixel');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

为什么赢得我的jQuery代码？

2 个答案: