如何更改鼠標懸停在當前元素上的以前的元素？

Question

我正在嘗試製作某種時間表。當我將鼠標懸停在內容上時，我將更改內容顏色以及歲月和子彈指示器的顏色。但是，我不知道如何保持先前的元素（年份和子彈），例如當我轉到第二或第三元素時突出顯示。怎麼做？如果我沒有清楚地解釋自己，我很樂意以其他方式解釋它，如果需要的話。我至今：

$('.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 1

我發現與索引值一起工作通常比解析一個簡單d重建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>

Answer 2

可以使用prev或prevAll通過選擇獲取前元素：

$('.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>