1

forループを使用して、この1つの関数で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

マウスオーバーとマウスアウトを行う代わりに、CSSusign: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'。class属性は（そうであるのに対して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-上記の修正として、それぞれに異なる背景画像があるという事実は、特別なブロックのそれぞれを処理するためにcssルールを追加するのではなく、JSを使用する十分な理由であると思います...

于 2012-09-26T00:22:17.323 に答える