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

您可以使用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>

Answer 2

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

如何在鼠标悬停当前元素时更改以前的元素？

2 个答案: