現在の要素をマウスオーバーすると、前の要素をどのように変更するのですか？

Question

私はある種のタイムラインを作ろうとしています。コンテンツをマウスオーバーすると、そのコンテンツの色と年の色と弾丸のインジケータが変更されます。しかし、私は前の要素（年と箇条書き）をどのように維持するか分かりません。たとえば、2番目または3番目の要素に行くと、強調表示されます。どうやってするか？私が自分自身を明確に説明していないならば、必要ならばそれを別の方法で説明してもらえます。私はこれまで持っている：私が見つけた

$('.tml_btn').on('mouseover', function() { 
 
    $('.active_content').removeClass('active_content'); 
 
    $(this) 
 
    .addClass('active_content') 
 
    .prevAll('.tml_btn') 
 
    .addClass('active_content'); 
 
    var content_id = $(this).attr('id').replace('tml_btn_', ''); 
 
    $('.tml_el').removeClass('active_bullet'); 
 
    $('#tml_el_' + content_id) 
 
    .addClass('active_bullet') 
 
    .prevAll('.tml_el') 
 
    .addClass('active_bullet'); 
 
});

.tml_content li { 
 
    width: 20px; 
 
} 
 
.bullet { 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 20px; 
 
    background: #adadad; 
 
    margin: 0 auto; 
 
} 
 
.tml_bar .tml_el { 
 
    display: inline-block; 
 
    margin-right: 50px; 
 
    text-align: center; 
 
} 
 
.active_content { 
 
    color: #3A9296; 
 
} 
 
.active_bullet { 
 
    color: #3A9296; 
 
} 
 
.active_bullet .bullet { 
 
    background: #3A9296; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class='timeline'> 
 
    <div class='tml_content'> 
 
    <ul> 
 
     <li class='tml_btn active_content' id='tml_btn_1'>content 1</li> 
 
     <li class='tml_btn' id='tml_btn_2'>content 2</li> 
 
     <li class='tml_btn' id='tml_btn_3'>content 3</li> 
 
     <li class='tml_btn' id='tml_btn_4'>content 4</li> 
 
    </ul> 
 
    </div> 
 
    <div class='tml_bar'> 
 
    <div class='tml_el active_bullet' id='tml_el_1'> 
 
     <div class='year'>2000</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    <div class='tml_el' id='tml_el_2'> 
 
     <div class='year'>2006</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    <div class='tml_el' id='tml_el_3'> 
 
     <div class='year'>2011</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    <div class='tml_el' id='tml_el_4'> 
 
     <div class='year'>2016</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

：

$('.tml_btn').on('mouseover', function() { 
 
    $('.active_content').removeClass('active_content'); 
 
    $(this).addClass('active_content'); 
 
    var content_id = $(this).attr('id').replace('tml_btn_', ''); 
 
    $('.tml_el').removeClass('active_bullet'); 
 
    $('#tml_el_' + content_id).addClass('active_bullet'); 
 
});

.tml_content li { 
 
    width: 20px; 
 
} 
 
.bullet { 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 20px; 
 
    background: #adadad; 
 
    margin: 0 auto; 
 
} 
 
.tml_bar .tml_el { 
 
    display: inline-block; 
 
    margin-right: 50px; 
 
    text-align: center; 
 
} 
 
.active_content { 
 
    color: #3A9296; 
 
} 
 
.active_bullet { 
 
    color: #3A9296; 
 
} 
 
.active_bullet .bullet { 
 
    background: #3A9296; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class='timeline'> 
 
    <div class='tml_content'> 
 
    <ul> 
 
     <li class='tml_btn active_content' id='tml_btn_1'>content 1</li> 
 
     <li class='tml_btn' id='tml_btn_2'>content 2</li> 
 
     <li class='tml_btn' id='tml_btn_3'>content 3</li> 
 
     <li class='tml_btn' id='tml_btn_4'>content 4</li> 
 
    </ul> 
 
    </div> 
 
    <div class='tml_bar'> 
 
    <div class='tml_el active_bullet' id='tml_el_1'> 
 
     <div class='year'>2000</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    <div class='tml_el' id='tml_el_2'> 
 
     <div class='year'>2006</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    <div class='tml_el' id='tml_el_3'> 
 
     <div class='year'>2011</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    <div class='tml_el' id='tml_el_4'> 
 
     <div class='year'>2016</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

あなたはprevまたはprevAllはセレクタで、前の要素を取得するために使用することができますインデックス値を使って作業することは、多くの場合、 ID値を再構成する。この場合、ホバリングされた要素のインデックスを取得し、それを使用して、関連する箇条書きおよびより低いインデックスを持つ要素を選択します。ゼロベースの値のためにインデックスに1を加えます。

$('.tml_btn').on('mouseover', function() { 
 
    $('.active_content').removeClass('active_content'); 
 
    $('.tml_el').removeClass('active_bullet'); 
 

 
    $(this).addClass('active_content'); 
 
    var idx = $(this).index() + 1; 
 

 
    for (var i = 0; i < idx; i++) { 
 
     $('.tml_el').eq(i).addClass('active_bullet'); 
 
    } 
 
});

.tml_content li { 
 
    width: 20px; 
 
} 
 
.bullet { 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 20px; 
 
    background: #adadad; 
 
    margin: 0 auto; 
 
} 
 
.tml_bar .tml_el { 
 
    display: inline-block; 
 
    margin-right: 50px; 
 
    text-align: center; 
 
} 
 
.active_content { 
 
    color: #3A9296; 
 
} 
 
.active_bullet { 
 
    color: #3A9296; 
 
} 
 
.active_bullet .bullet { 
 
    background: #3A9296; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class='timeline'> 
 
    <div class='tml_content'> 
 
    <ul> 
 
     <li class='tml_btn active_content' id='tml_btn_1'>content 1</li> 
 
     <li class='tml_btn' id='tml_btn_2'>content 2</li> 
 
     <li class='tml_btn' id='tml_btn_3'>content 3</li> 
 
     <li class='tml_btn' id='tml_btn_4'>content 4</li> 
 
    </ul> 
 
    </div> 
 
    <div class='tml_bar'> 
 
    <div class='tml_el active_bullet' id='tml_el_1'> 
 
     <div class='year'>2000</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    <div class='tml_el' id='tml_el_2'> 
 
     <div class='year'>2006</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    <div class='tml_el' id='tml_el_3'> 
 
     <div class='year'>2011</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    <div class='tml_el' id='tml_el_4'> 
 
     <div class='year'>2016</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    </div> 
 
</div>