Как оптимально применить код для нескольких элементов?

Question

[Артём]

$(document).ready(function() {
           $("#point-1").hover(function () {
                $("#list-1").css("text-decoration", "underline");
            });
            $("#point-1").mouseleave(function () {
                $("#list-1").css("text-decoration", "none");
            });
            $("#list-1").hover(function () {
                $("#point-1").css("opacity", "1");
            });
            $("#list-1").mouseleave(function () {
                $("#point-1").css("opacity", "0.7");
            });
        });

<div class="col-xs-12 col-sm-6 locker-scheme">
                   <img class="locker-scheme-pic" src="">                   
                       <div id="point-1" class="locker-scheme-points point-1">                            
                            <span class="">1</span>                        
                       </div>
                       <div id="point-2" class="locker-scheme-points point-2">                            
                            <span class="">2</span>                        
                       </div>
                       <div id="point-3" class="locker-scheme-points point-3">                            
                            <span class="">3</span>                        
                       </div>
                       <div id="point-4" class="locker-scheme-points point-4">                            
                            <span class="">4</span>                        
                       </div>
                       <div id="point-5" class="locker-scheme-points point-5">                            
                            <span class="">5</span>                        
                       </div>
                       <div id="point-6" class="locker-scheme-points point-6">                            
                            <span class="">6</span>                        
                       </div>
                       <div id="point-7" class="locker-scheme-points point-7">                            
                            <span class="">7</span>                        
                       </div>
                       <div id="point-8" class="locker-scheme-points point-8">                            
                            <span class="">8</span>                        
                       </div>                      
               </div>
               <div class="col-xs-12 col-sm-6 locker-scheme-list">
                   <ol>
                       <li id="list-1">Lorem Ipsum</li>
                       <li id="list-2">Lorem Ipsum</li>
                       <li id="list-3">Lorem Ipsum</li>
                       <li id="list-4">Lorem Ipsum</li>
                       <li id="list-5">Lorem Ipsum</li>
                       <li id="list-6">Lorem Ipsum</li>
                       <li id="list-7">Lorem Ipsum</li>
                       <li id="list-8">Lorem Ipsum</li>
                   </ol>       
               </div>

Point и list идут парами. От 1 до 8. Понятно, что можно просто продублировать эти 8 строчек, но это громоздко очень и явно неправильно. Как сделать оптимальнее всего?

Answer 1

[Павел]

$(document).ready(function() {
           $("#point-1, #point-2").hover(function () {
                $("#list-1, #list-2").css("text-decoration", "underline");
            });
            $("#point-1, #point-2").mouseleave(function () {
                $("#list-1, #list-2").css("text-decoration", "none");
            });
            $("#list-1, #list-2").hover(function () {
                $("#point-1, #point-2").css("opacity", "1");
            });
            $("#list-1, #list-2").mouseleave(function () {
                $("#point-1, #point-2").css("opacity", "0.7");
            });
        });

Comments

[Артём]

Эффект должен быть только парным. 1-1, 2-2, 3-3 и т.д.