同步导航滑块

Question

到目前为止，我已经创建了以下内容：截图

基本上，从左边的红色div开始，右边是活动的红色圆圈。例如，当您单击蓝色圆圈时，左侧的div将变为蓝色，然后蓝色圆圈变为活动，而红色圆圈则变得不活跃。以下是单击蓝色圆圈后的处理方式：截图

当然，如果你点击绿色的圆圈，左边的div变成绿色如果你点击黑色的圆圈，左边的div变成黑色。

以下是代码：

​

$(document).ready(function(){
    $('#circle-2').click(function(){
        $(this).addClass('active-circle')
        $('#circle-1').removeClass('active-circle')
        $('#circle-3').removeClass('active-circle')
        $('#circle-4').removeClass('active-circle')
        $('.rect').removeClass('rect-1').removeClass('rect-3').removeClass('rect-4').addClass('rect-2')
    })

    $('#circle-1').click(function(){
        $(this).addClass('active-circle')
        $('#circle-2').removeClass('active-circle')
        $('#circle-3').removeClass('active-circle')
        $('#circle-4').removeClass('active-circle')
        $('.rect').removeClass('rect-2').removeClass('rect-3').removeClass('rect-4').addClass('rect-1')
    })

    $('#circle-3').click(function(){
        $(this).addClass('active-circle')
        $('#circle-1').removeClass('active-circle')
        $('#circle-2').removeClass('active-circle')
        $('#circle-4').removeClass('active-circle')
        $('.rect').removeClass('rect-1').removeClass('rect-2').removeClass('rect-4').addClass('rect-3')
    })

    $('#circle-4').click(function(){
        $(this).addClass('active-circle')
        $('#circle-1').removeClass('active-circle')
        $('#circle-2').removeClass('active-circle')
        $('#circle-3').removeClass('active-circle')
        $('.rect').removeClass('rect-1').removeClass('rect-2').removeClass('rect-3').addClass('rect-4')
    })
})

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.rect {
    height: 50vh;
    width: 100%;
}

.rect-1 {
    background: red;
}

.rect-2 {
    background: blue;
}

.rect-3 {
    background: green;
}

.rect-4 {
    background: black;
}

.circle {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    opacity: .25;
}

.circle-color-1 {
    background-color: red;
}

.circle-color-2 {
    background-color: blue;
}

.circle-color-3 {
    background-color: green;
}

.circle-color-4 {
    background-color: black;
}

.active-circle {
    opacity: 1;
}

    <div class="grid">
        <div class="rect rect-1">

        </div>
        <div class="circles-container">
            <div id="circle-1" class="circle circle-color-1 active-circle">Circle 1</div>
            <div id="circle-2" class="circle circle-color-2">Circle 2</div>
            <div id="circle-3" class="circle circle-color-3">Circle 3</div>
            <div id="circle-4" class="circle circle-color-4">Circle 4</div>
        </div>
    </div>
    <script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous">
    </script>
    <script src="./index.js"></script>

​

这里是我挣扎的地方。我希望左边的div每3秒自动切换一次颜色，当然，右边的圆圈也应该与之匹配。我们从左边的div开始，右边的红色圆圈是活动的，3秒后div变成蓝色，活动的圆圈是蓝色的。基本上，我现在有，但自动发生，不需要点击圆和保留点击功能以及。

Answer 1

除了通过元素实现自动循环之外，您的首要任务是使代码干涸。考虑到多个重复事件处理程序之间的所有更改都是您添加的类，您可以删除id属性并通过它们的公共.circle类将元素作为目标。然后，可以绑定单个事件处理程序，该处理程序对所有元素都有效，并将类应用到.rect，该类存储在每个元素的data属性中。

要创建循环效果，可以使用setInterval()，针对当前具有.active-circle的元素的下一个元素。试试这个：

​

jQuery($ => {
  var $rect = $('.rect');
  var $circles = $('.circle').on('click', setActiveCircle);
  $circles.first().trigger('click');
  
  function setActiveCircle() {
    $circles.removeClass('active-circle');
    $(this).addClass('active-circle');
    $rect.removeClass('rect-1 rect-2 rect-3 rect-4').addClass($(this).data('rect'));
  }
  
  setInterval(function() {
    let $targetCircle = $circles.filter('.active-circle').next();
    if ($targetCircle.length === 0)
      $targetCircle = $circles.first();
      
    setActiveCircle.call($targetCircle);
  }, 3000);  
});

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.rect {
  height: 50vh;
  width: 100%;
}

.rect-1 { background: red; }
.rect-2 { background: blue; }
.rect-3 { background: green; }
.rect-4 { background: black; }

.circle {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  opacity: .25;
}

.circle-color-1 { background-color: red; }
.circle-color-2 { background-color: blue; }
.circle-color-3 { background-color: green; }
.circle-color-4 { background-color: black; }

.active-circle { opacity: 1; }

<div class="grid">
  <div class="rect"></div>
  <div class="circles-container">
    <div class="circle circle-color-1" data-rect="rect-1">Circle 1</div>
    <div class="circle circle-color-2" data-rect="rect-2">Circle 2</div>
    <div class="circle circle-color-3" data-rect="rect-3">Circle 3</div>
    <div class="circle circle-color-4" data-rect="rect-4">Circle 4</div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>

​