jqueryでそれぞれの要素ごとに処理をするにはどうすればいいですか？

Question

.sub_1, .sub_2, .sub_3 {
	width: 400px;
	margin-top: 20px;
	padding: 8px 20px;
	position: relative;
	left: 0px;
}
.sub_1 {
	background-color: rgba(200, 0, 0, 0.3);
}
.sub_2 {
	background-color: rgba(0, 200, 0, 0.3);
}
.sub_3 {
	background-color: rgba(0, 0, 200, 0.3);
}
.con_1, .con_2, .con_3 {
	width: 1000px;
	margin-top: 5px;
	padding: 10px 20px;
	background-color: transparent;
	float: left;
}
.con_1 h1, .con_2 h1, .con_3 h1 {
	font-size: 23px;
	font-weight: 100;
	padding: 4px;
	color: rgb(0, 0, 200);
}
.con_1 p, .con_2 p, .con_3 p {
	font-size: 15px;
	color: rgb(0, 50, 200);
}

var class_dict = {
sub_1 : '.con_1',
sub_2 : '.con_2',
sub_3 : '.con_3',
}
こんな感じでsub_1, sub_2, sub_3にマウスポインタが乗ったときcon_1, con_2, con_3とそれぞれ対応させて表示させたいです。どのようにすればいいですか？

Answer 1

こんな感じで良いと思います。

$(function(){
    var class_dict = {
        sub_1 : '.con_1',
        sub_2 : '.con_2',
        sub_3 : '.con_3',
    };

    $.each(class_dict, function(k, v){
        $(v).hide();
        $("." + k)
            .on('mouseenter', function(){ $(v).show() })
            .on('mouseleave', function(){ $(v).hide() })
        ;
    })
})

Comments

[foo45]

ありがとうございました。
あと質問なんですが、引数のkとvにはclass_dictのkeyと値が対応しているという見解でいいのでしょうか？

[ngyuki]

そうです。