1

我在这个函数中使用 for 循环通过 jQuery 显示所有元素：

<script> 
$(function() {
    var number_menus = 9;
    for (i = 1; i <= number_menus; i++) {
        var p1 = +i;
        $(".wm_" + i).show()
            .css("background-image", "url(imagenes/footer/m/" + i + ".png)");

        $(".wm_" + i).mouseover(function() {
            $(this).css(
                "background-image", 
                "url(imagenes/footer/m/" + i + "_down.png)"
            );
            alert("this_down.png");
        });

        $(".wm_" + i).mouseout(function() {
            $(this).css(
                "background-image", 
                "url(imagenes/footer/m/" + i + ".png)"
            );
        });
    }
});​
</script>

另一方面，我有此代码用于显示所有元素或图像加载并创建鼠标悬停效果：

<div id="web_footer_publi">
  <div id="web_footer_marks" class="wm_1"></div> 
  <div id="web_footer_marks" class="wm_2"></div> 
  <div id="web_footer_marks" class="wm_3"></div> 
  <div id="web_footer_marks" class="wm_4"></div>
  <div id="web_footer_marks" class="wm_5"></div> 
  <div id="web_footer_marks" class="wm_6"></div> 
  <div id="web_footer_marks" class="wm_7"></div> 
  <div id="web_footer_marks" class="wm_8"></div>
  <div id="web_footer_marks" class="wm_9"></div>
</div>

当创建函数时，请考虑在循环中显示所有类的所有可能性，但是当我查看图像时，这会向我显示循环的其他图像并且效果不佳，我想请告诉我此代码中有什么不好与它一起使用

谢谢 ！！

4

4 回答 4

3

而不是做 mouseover 和 mouseout 使用一点 CSS usign:hover选择器

<style>
.wm_1 {
  background-image: url(imagenes/footer/m/1.png);
}
.wm_1:hover {
  background-image: url(imagenes/footer/m/1_down.png);
}
</style>

不需要 JS

对其余节点重复此 CSS - 2,3,4...9

于 2012-09-26T00:16:28.203 回答
1

我认为这是由于上下文造成的。在循环内创建一个闭包，以便代码立即执行。也应该有其他方法来解决这个问题。

 <script> 
    $(function() {
        var number_menus = 9;
        for (i = 1; i <= number_menus; i++) {

    (function(i){

            var p1 = +i;
            $(".wm_" + i).show().css("background-image", "url(imagenes/footer/m/" + i + ".png)").mouseover(function() {
                $(this).css("background-image", "url(imagenes/footer/m/" + i + "_down.png)");
                alert("this_down.png");
            }).mouseout(function() {
                $(this).css("background-image", "url(imagenes/footer/m/" + i + ".png)");
            });

    })(i);

        }
    });​
</script>
于 2012-09-26T00:13:16.443 回答
0

试试这个方法，看看它是否有效

$(function() {
    var number_menus = 9;
    (function() { for (i = 1; i <= number_menus; i++) {
        var p1 = +i;
        $(".wm_" + i).show().css("background-image", "url(imagenes/footer/m/" + i + ".png)");
        $(".wm_" + i).mouseover(function() {
            $(this).css("background-image", "url(imagenes/footer/m/" + i + "_down.png)");
            alert("this_down.png");
        });
        $(".wm_" + i).mouseout(function() {
            $(this).css("background-image", "url(imagenes/footer/m/" + i + ".png)");
        });
    } })(i);
});​
于 2012-09-26T00:15:17.657 回答
0

通常，您将在所有元素上都有一个公共类，您可以使用它们来共同定位所有元素；例如，在您的情况下，它可能是class='wm'. 类属性不必是唯一的（而id确实如此），因此这是一个合理的类共有。但是，即使它们只是相似的，您也不需要 for 循环 - 只需使用attribute-starts-with 选择器即可一次将它们全部定位。对于索引，属性设置器都有一个方法签名，它接受一个可以提供索引作为参数的函数。

$(document).ready(function() {
    var $specialDivs = $("div[class^='wm'");

    $specialDivs
        .show()
        .css("background-image", function (i) {
            return "url(imagenes/footer/m/" + i + ".png)";
        });
        .mouseenter(function() {
            $(this).css("background-image", function (i) {
                return "url(imagenes/footer/m/" + i + "_down.png)";
            });
            alert("this_down.png");
        });
        .mouseleave(function() {
            $(this).css("background-image", function (i) {
                return "url(imagenes/footer/m/" + i + ".png)";
            });
        });
});

然而，所有这些只有在你实际上有一些具体的事情要做 （见更正）使用这些节点，而不是悬停时的简单 css 效果；这些应该用简单的CSS来完成：

div[class^='wm']:hover {
    background-image: ...;
}

n- 作为对上述内容的更正，我认为每个人都有不同的背景图像这一事实是使用 JS 而不是添加css 规则来处理每个特殊块的充分理由......

于 2012-09-26T00:22:17.323 回答