javascript - 如何在鼠标悬停在当前元素上时更改先前的元素？

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

我发现使用索引值通常比解析和重建 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>