javascript - それらのホバー機能を組み合わせる方法

Question

ホバー後に不透明度を変更するためにグループ化する必要のあるスパンがたくさんあります。それらはすべて一意のIDを持っている必要がありますが、これらすべてのホバー関数を1つの関数に結合する方法はありますか？

jQuery

//09    
    $('#c_09_241a, #c_09_241b, #c_09_241c, #c_09_241d').hover(
        function() {
            $('#c_09_241a, #c_09_241b, #c_09_241c, #c_09_241d').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_09_241a, #c_09_241b, #c_09_241c, #c_09_241d').stop(true, true).css('opacity','0');
    }); 
    $('#c_09_242a, #c_09_242b').hover(
        function() {
            $('#c_09_242a, #c_09_242b').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_09_242a, #c_09_242b').stop(true, true).css('opacity','0');
    });
    $('#c_09_245a, #c_09_245b').hover(
        function() {
            $('#c_09_245a, #c_09_245b').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_09_245a, #c_09_245b').stop(true, true).css('opacity','0');
    });
    $('#c_09_246a, #c_09_246b').hover(
        function() {
            $('#c_09_246a, #c_09_246b').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_09_246a, #c_09_246b').stop(true, true).css('opacity','0');
    });

    //08    
    $('#c_08_235a, #c_08_235b, #c_08_235c, #c_08_235d').hover(
        function() {
            $('#c_08_235a, #c_08_235b, #c_08_235c, #c_08_235d').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_08_235a, #c_08_235b, #c_08_235c, #c_08_235d').stop(true, true).css('opacity','0');
    }); 
    $('#c_08_236a, #c_08_236b').hover(
        function() {
            $('#c_08_236a, #c_08_236b').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_08_236a, #c_08_236b').stop(true, true).css('opacity','0');
    });
    $('#c_08_239a, #c_08_239b').hover(
        function() {
            $('#c_08_239a, #c_08_239b').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_08_239a, #c_08_239b').stop(true, true).css('opacity','0');
    });
    $('#c_08_240a, #c_08_240b').hover(
        function() {
            $('#c_08_240a, #c_08_240b').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_08_240a, #c_08_240b').stop(true, true).css('opacity','0');
    });

    //07    
    $('#c_07_227a, #c_07_227b').hover(
        function() {
            $('#c_07_227a, #c_07_227b').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_07_227a, #c_07_227b').stop(true, true).css('opacity','0');
    });
    $('#c_07_228a, #c_07_228b, #c_07_228c').hover(
        function() {
            $('#c_07_228a, #c_07_228b, #c_07_228c').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_07_228a, #c_07_228b, #c_07_228c').stop(true, true).css('opacity','0');
    });
    $('#c_07_007a, #c_07_007b').hover(
        function() {
            $('#c_07_007a, #c_07_007b').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_07_007a, #c_07_007b').stop(true, true).css('opacity','0');
    });
    $('#c_07_008a, #c_07_008b').hover(
        function() {
            $('#c_07_008a, #c_07_008b').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_07_008a, #c_07_008b').stop(true, true).css('opacity','0');
    });

HTML

<div id="rzuty09p" class="rzuty">
            <span id="c_09_241a" class="mieszkanie" title=""></span>
            <span id="c_09_241b" class="mieszkanie" title=""></span>
            <span id="c_09_241c" class="mieszkanie" title=""></span>
            <span id="c_09_241d" class="mieszkanie" title=""></span>
            <span id="c_09_242a" class="mieszkanie" title=""></span>
            <span id="c_09_242b" class="mieszkanie" title=""></span>
            <span id="c_09_243" class="mieszkanie" title=""></span>
            <span id="c_09_244" class="mieszkanie" title=""></span>
            <span id="c_09_245a" class="mieszkanie" title=""></span>
            <span id="c_09_245b" class="mieszkanie" title=""></span>
            <span id="c_09_246a" class="mieszkanie nie" title=""></span>
            <span id="c_09_246b" class="mieszkanie nie" title=""></span>
        </div>  

<div id="rzuty08p" class="rzuty">
            <span id="c_08_235a" class="mieszkanie" title=""></span>
            <span id="c_08_235b" class="mieszkanie" title=""></span>
            <span id="c_08_235c" class="mieszkanie" title=""></span>
            <span id="c_08_235d" class="mieszkanie" title=""></span>
            <span id="c_08_236a" class="mieszkanie nie" title=""></span>
            <span id="c_08_236b" class="mieszkanie nie" title=""></span>
            <span id="c_08_237" class="mieszkanie" title=""></span>
            <span id="c_08_238" class="mieszkanie" title=""></span>
            <span id="c_08_239a" class="mieszkanie" title=""></span>
            <span id="c_08_239b" class="mieszkanie" title=""></span>
            <span id="c_08_240a" class="mieszkanie" title=""></span>
            <span id="c_08_240b" class="mieszkanie" title=""></span>
        </div>      

<div id="rzuty07p" class="rzuty">
            <span id="c_07_226" class="mieszkanie" title=""></span>
            <span id="c_07_227a" class="mieszkanie" title=""></span>
            <span id="c_07_227b" class="mieszkanie" title=""></span>
            <span id="c_07_228a" class="mieszkanie" title=""></span>
            <span id="c_07_228b" class="mieszkanie" title=""></span>
            <span id="c_07_228c" class="mieszkanie" title=""></span>
            <span id="c_07_229" class="mieszkanie nie" title=""></span>
            <span id="c_07_005" class="mieszkanie" title=""></span>
            <span id="c_07_006" class="mieszkanie" title=""></span>
            <span id="c_07_007a" class="mieszkanie nie" title=""></span>
            <span id="c_07_007b" class="mieszkanie nie" title=""></span>
            <span id="c_07_008a" class="mieszkanie" title=""></span>
            <span id="c_07_008b" class="mieszkanie" title=""></span>
        </div>

score 2 · Accepted Answer

3つのオプションがあります。

クラスをセルクターとして使用します。

$('.mieszkanie').hover(
    function() {
        $(this).stop(true, true).css('opacity','1');
    },
    function() {
        $(this).stop(true, true).css('opacity','0');
});

同じセレクターにすべてのIDを追加します。

$('#c_09_245a, #c_09_245b, #c_09_246a, #c_09_246b, #c_09_247a, #c_09_247b').hover(
    function() {
        $(this).stop(true, true).css('opacity','1');
    },
    function() {
        $(this).stop(true, true).css('opacity','0');
});

コードを減らすために必要なことを行う2つの関数を作成します。

function show () {
    $(this).stop(true, true).css('opacity','1');
}

function hide () {
    $(this).stop(true, true).css('opacity','0');
}

$(selector).hover(show, hide);

score 1 · Accepted Answer

thisイベントをトリガーした要素を運ぶほとんどのjQueryイベントハンドラー内で使用できます。次のようなものを試してください：

$('.rzuty>span').hover(function() {
    $(this).stop(true, true).css('opacity',1);
}, function() {
    $(this).stop(true, true).css('opacity',0);
});

または、より具体的にしたい場合は、クラスを追加してセレクターで使用します。

score 0 · Accepted Answer

マットへのthx、私たちは最終的な答えを持っています

var ids = [
    "#c_07_227a, #c_07_227b",
    "#c_07_228a, #c_07_228b, #c_07_228c"
    // add more here
];

ids.forEach(function(i) {
    $(i).hover(function() {
        $(i).stop(true, true).css('opacity', '1');
    }, function() {
        $(i).stop(true, true).css('opacity', '0');
    });
});

javascript - それらのホバー機能を組み合わせる方法

3 に答える 3

Related

Reference