jQuery更改值鼠标悬停答案

【问题标题】：Jquery change values mouseoverjQuery更改值鼠标悬停
【发布时间】：2012-08-02 18:17:37
【问题描述】：

我写了这段代码，但它不起作用：

JavaScript：

$(function() { 
    var menu_h_number=5

    for (i=1; i<=menu_h_number; i++)
    {
        $(".web_header_mb_"+i).show(1000);

        $(".web_header_mb_"+i).css("background", "#FF0000");

        $(".web_header_mb_"+i).hover(function () 
        {
            $(".web_header_mb_"+i).css("width", "200");
        });

        $(".web_header_mb_"+i).mouseout(function () 
        {
            $(".web_header_mb_"+i).css("width", "300");
        });
    }
});

HTML：

<div id="menu" class="web_header_mb_1"></div>
<div id="menu" class="web_header_mb_2"></div>
<div id="menu" class="web_header_mb_3"></div>
<div id="menu" class="web_header_mb_4"></div>
<div id="menu" class="web_header_mb_5"></div>

当开始在 bucle 中显示不同的 ids 但当我执行 mouseover 时，大小没有变化。

【问题讨论】：

相比 for 循环，我认为使用一两个 css 类会更简洁，将 javascript 减少到一行左右。
我删除了您添加的新代码，因为您提出了一个新问题。请把它作为一个新问题发布。你仍然可以find the code in the revisions。
啊，好吧，我想我可以多放点东西，然后继续发帖，好吧，我会创建新帖子

标签： javascript jquery jquery-ui mouseover

【解决方案1】：

为什么它不起作用

您的代码不起作用的原因是：

i 将具有立即执行的代码的正确值（例如 show 和 hover 调用）。但是，由于 JavaScript 的工作方式，这不适用于回调（例如您提供给 hover 的回调）。 JavaScript 将记住变量，而不是提供回调时变量的值。直到循环完成后才会调用回调。这就是为什么在回调中i 总是5，因为那是i 的最后一个值。

您可以在此处阅读更多相关信息：Closures (MDN)

另外，请注意id 的必须是唯一的。您不能将id“菜单”赋予五个不同的元素；这就是课程的用途。换句话说：你的代码中有id 和class。

如何让它发挥作用

绕过闭包“问题”的最简单方法是在回调函数中使用$(this)。在 jQuery 中，回调函数中的 this 关键字总是指向触发事件的对象。通过使用$(this)，您拥有完全正确的 jQuery 对象，无需大惊小怪：

for (i=1; i<=menu_h_number; i++)
{
    var currentItem = $(".web_header_mb_" + i);

    currentItem
        .show(1000)
        .css("background", "#FF0000");
        .hover(
            function() { // mouseenter
                $(this).css("width", 200);    // <--
            },
            function() { // mouseleave
                $(this).css("width", 300);    // <--
            });
}

我在上面的代码中做的另一件事是 buffer 局部变量 (currentItem) 中的 jQuery 对象。这使您的代码更快，因为您只需查找元素一次（而不是 6 次，在这种情况下）。你应该尽可能地这样做。

此外，如您所见，hover function 不仅仅用于mouseover 事件。你可以给它回调来处理mouseover和mouseout。

正如其他人已经建议的那样，您可以做的另一件事是使用单个类而不是 5 个不同的类。如果查询匹配多个对象，jQuery 函数 ($()) 实际上会返回一个集合。

因此，给定以下 HTML：

<div class="menu web_header_mb"></div>
<div class="menu web_header_mb"></div>
<div class="menu web_header_mb"></div>
<div class="menu web_header_mb"></div>
<div class="menu web_header_mb"></div>

你可以使用each()，像这样：

$(".menu.web_header_mb").each(function() {
    $(this)
        .show(1000)
        .css("background", "#FF0000");
        .hover(
            function() { // mouseenter
                $(this).css("width", 200);
            },
            function() { // mouseleave
                $(this).css("width", 300);
            });
});

甚至这个：

$(".menu.web_header_mb").
    .show(1000)
    .css("background", "#FF0000");
    .hover(
        function() { // mouseenter
            $(this).css("width", 200);
        },
        function() { // mouseleave
            $(this).css("width", 300);
        });

最后一个有效，因为 show()、css() 和 hover() 都适用于 jQuery 集合（以及单个 jQuery 对象）。整洁吧？

【讨论】：

是的，使用 $(this) 可以完美运行，直到此为止，我创建了具有名称和调用函数的函数，并且为此有效，直到现在我使用它，如果不使用 $(this) 则无效并且一直以来，当我输入 alert() 时，我总是看到 i=5 的值，现在完美运行:)

【解决方案2】：

这是因为执行悬停代码时 i 变量不在范围内或具有最新值。而是使用此变量。

仅供参考： 1.您的 div 标签具有相同的 ID 但不同的类名。相反，使它们具有相同的类和不同的 ID。比你可以很好地使用 jQuery.each 函数。

hover 函数可以有 2 个参数，第一个用于 mousein，第二个用于 mouseout。这样你就可以精简你的代码

【讨论】：

【解决方案3】：

尝试使用这个

$(function(){

    var menu_h_number=5;

    for (var i=1; i <= menu_h_number;i++) {
        $(".web_header_mb_"+i).show(1000)
                              .css("background","#FF0000")
                              .mouseover(function () {
                                  $(this).css("width","200");
                              })
                              .mouseout(function () {
                                  $(this).css("width","300");
                              });
    }
});

也可通过jsfiddle获得

【讨论】：

【解决方案4】：

jQuery.hover() 实际上需要两个参数，鼠标移入和鼠标移出。

$(".web_header_mb_"+i).hover(
function ()  { $(this).css("width","200px") }, 
function ()  { $(this).css("width","300px") }
);

实际上，查看代码，这并不是一个真正的好方法。在这里尝试这种方式：给所有 div 相同的类，而不是使用 for 循环进行迭代，并使用 $.each 来提供所需的事件。

<div id="menu" class="web_header_mb"></div>
<div id="menu" class="web_header_mb"></div>
<div id="menu" class="web_header_mb"></div>
<div id="menu" class="web_header_mb"></div>
<div id="menu" class="web_header_mb"></div>

$.each(".web_header_mb", function (){
  $(this).hover(
   function ()  { $(this).css("width","200px") }, 
   function ()  { $(this).css("width","300px") }
  );
});

【讨论】：

我修改了翻转菜单 mouover 的代码并检测你可以看到的 par 或 impar 元素，现在的问题是我如何在背景上创建效果

【解决方案5】：

没有必要循环遍历元素，只要你找出选择器，jQuery 就会为你做到这一点。

尝试匹配具有以web_header_mb_ 开头的类的每个元素，然后删除不需要的元素。如果他们有正确的索引，你可以:lt(5) 或slice(0,5)，否则你必须根据类的最后一个字符过滤它们。你也可以链接方法，不需要每次都调用选择器：

$("[class^='web_header_mb_']").filter(function() {
    var C = $(this).prop('class'); 
        C = C.charAt(C.length-1);
    return (C==1||C==2||C==3||C==4||C==5);
}).show(1000)
  .css("background","#FF0000")
  .on('mouseenter mouseleave', function() {
        $(this).css('width', e.type==='mouseenter'?'200':300);
});

或

$("[class^='web_header_mb_']:lt(5)").show(1000)
    .css("background","#FF0000")
    .on('mouseenter mouseleave', function() {
       $(this).css('width', e.type==='mouseenter'?'200':300);
});

【讨论】：