jQueryコードを動的にする/短くする

Question

ホバーにdivを表示するだけです。このためjQueryは以下のとおりです。コードを同じ行に残してエラーが発生するように動的にしようとしています。

$(".column-wrapper-main").mouseenter(function() { 
    $(".column-wrapper-hov1").css("opacity", "1"); 
    }).mouseleave(function() { 
    $(".column-wrapper-hov1").css("opacity", "0"); 
}); 

$(".column-wrapper-main2").mouseenter(function() { 
    $(".column-wrapper-hov2").css("opacity", "1"); 
    }).mouseleave(function() { 
    $(".column-wrapper-hov2").css("opacity", "0"); 
}); 
//Box 3 
$(".column-wrapper-main3").mouseenter(function() { 
    $(".column-wrapper-hov3").css("opacity", "1"); 
    }).mouseleave(function() { 
    $(".column-wrapper-hov3").css("opacity", "0"); 
}); 

//Box 4 
$(".column-wrapper-main4").mouseenter(function() { 
    $(".column-wrapper-hov4").css("opacity", "1"); 
    }).mouseleave(function() { 
    $(".column-wrapper-hov4").css("opacity", "0"); 
}); 
//Box 5 
$(".column-wrapper-main5").mouseenter(function() { 
    $(".column-wrapper-hov5").css("opacity", "1"); 
    }).mouseleave(function() { 
    $(".column-wrapper-hov5").css("opacity", "0"); 
}); 
//Box 6 
$(".column-wrapper-main6").mouseenter(function() { 
    $(".column-wrapper-hov6").css("opacity", "1"); 
    }).mouseleave(function() { 
    $(".column-wrapper-hov6").css("opacity", "0"); 
}); 
//Box 7 
$(".column-wrapper-main7").mouseenter(function() { 
    $(".column-wrapper-hov7").css("opacity", "1"); 
    }).mouseleave(function() { 
    $(".column-wrapper-hov7").css("opacity", "0"); 
}); 
//Box 8 
$(".column-wrapper-main8").mouseenter(function() { 
    $(".column-wrapper-hov8").css("opacity", "1"); 
    }).mouseleave(function() { 
    $(".column-wrapper-hov8").css("opacity", "0"); 
}); 

Answer 1

すべての要素にクラスを適用しないのはなぜですか？

$('.column-effect').on('mouseenter mouseleave', function(e) { 
    $(".column-wrapper-hov" + $(e.delegateTarget).attr('data-index')).css("opacity", e.type == 'mouseenter' ? 1 : 0); 
}); 

そして、このような要素ごとにデータ属性を割り当てる：

<div class="column-wrapper-main column-effect" data-index="1"></div> 

再びこれを見直し、私も仕事のためにはJavaScriptを使用していないだろう。

.column-effect { 
    opacity : 0; 
} 
    .column-effect:hover { 
     opacity: 1 
    } 

Answer 2

これらのすべては、番号なしで同じクラスを使用する必要があります。単純に指定されたコンテキスト内のセレクタを参照するよりも簡単です。これはネストされている場合にのみ機能します。

$(".column-wrapper-main").mouseenter(function() { 
    $(".column-wrapper-hov", $(this)).css("opacity", "1"); 
    }).mouseleave(function() { 
    $(".column-wrapper-hov",$(this)).css("opacity", "0");; 
}); 

ネストされていない場合は、データ属性を使用してターゲットIDを取得できます。

$(".column-wrapper-main").mouseenter(function() { 
    var target = $(this).data('target'); 
    $(target).css("opacity", "1"); 
    }).mouseleave(function() { 
    var target = $(this).data('target'); 
    $(target).css("opacity", "0"); 
}); 

Answer 3

は、私はあなたのHTMLレイアウトのわからないので、私は広範囲にこれをテストすることができませんでしたが、これはあなたのために働く可能性があります単純なCSSは十分だろう。

$("[class^=column-wrapper-main]").mouseenter(function() { 
    var letter = ($(this).attr('class')) 
    var combined = ".column-wrapper-hov" + letter.substr(letter.length - 1); 
    $(combined).css("opacity", "1"); 
    }).mouseleave(function() { 
    var letter = ($(this).attr('class')) 
    var combined = ".column-wrapper-hov" + letter.substr(letter.length - 1); 
    $(combined).css("opacity", "0"); 
}); 

Answer 4

まず、indexclassから名前を削除し、それにidを追加します。そして、このようなあなたのHTMLの何かが

<div class="column-wrapper-main" id="column-wrapper-main-1"> 
    <!-- Bla bla bla --> 
</div> 
<div class="column-wrapper-main" id="column-wrapper-main-2"> 
    <!-- Bla bla bla --> 
</div> 

が続いJS/jQueryの中であなたがHTMLである

$('.column-wrapper-main').mouseenter(function() { 
    var number = $(this).attr('id').split('-')[3]; 
    $(".column-wrapper-hov" + number).css("opacity", "1"); 
}).mouseleave(function() { 
    var number = $(this).attr('id').split('-')[3]; 
    $(".column-wrapper-hov" + number).css("opacity", "0"); 
});