Не происходит переключение событий jQuery? Не происходит повторный выбор условия

let colorsClass1 = ['active-green', 'active-blue', 'active-violet']; 
let colorsClass2 = ['active-crimson', 'active-magenta', 'active-navy']; 
let colorsClass3 = ['active-coral', 'active-chartreuse', 'active-teal']; 
 
$(document).ready(function () { 
  $('.block--left-item').click(function () { 
    if ($(this).hasClass('link-1')) { 
      $('.block--left-item').removeClass(); 
      $('.block--left-list a').removeClass(); 
 
      const randomClassname1 = randClass1(); 
      $(this).addClass('block--left-item').addClass('link-1'); 
      $('.block--left-item a').addClass('link-1').addClass(randomClassname1); 
      $('.logo-svg').removeClass().addClass(randomClassname1 + ' logo-svg'); 
    } 
    if ($(this).hasClass('link-2')) { 
      $('.block--left-item').removeClass(); 
      $('.block--left-list a').removeClass(); 
 
      const randomClassname2 = randClass2(); 
      $(this).addClass('block--left-item').addClass('link-2'); 
      $('.block--left-item a').addClass('link-2').addClass(randomClassname2); 
      $('.logo-svg').removeClass().addClass(randomClassname2 + ' logo-svg'); 
    } 
    if ($(this).hasClass('link-3')) { 
      $('.block--left-item').removeClass(); 
      $('.block--left-list a').removeClass(); 
 
      const randomClassname3 = randClass3(); 
      $(this).addClass('block--left-item').addClass('link-3'); 
      $('.block--left-item a').addClass('link-3').addClass(randomClassname3); 
      $('.logo-svg').removeClass().addClass(randomClassname3 + ' logo-svg'); 
    } 
  }); 
}); 
 
 
//Функция рандомного класса из массива 
 
function randClass1() { 
  let randomClass1 = colorsClass1[Math.floor(Math.random() * colorsClass1.length)]; 
  return randomClass1; 
}; 
 
function randClass2() { 
  let randomClass2 = colorsClass2[Math.floor(Math.random() * colorsClass2.length)]; 
  return randomClass2; 
}; 
 
function randClass3() { 
  let randomClass3 = colorsClass3[Math.floor(Math.random() * colorsClass3.length)]; 
  return randomClass3; 
};

body, ul { 
  padding: 0; 
  margin: 0; 
  font-family: 'Roboto', sans-serif; 
  font-size: 16px; 
  line-height: 22px; 
  font-weight: normal; 
  color: #000; 
} 
 
a { 
  text-decoration: none; 
  color: #000; 
} 
 
li { 
  display: block; 
  list-style-type: none; 
} 
 
.block { 
  display: flex; 
  max-width: 1170px; 
} 
 
.block--left-header { 
  display: flex; 
  align-items: center; 
} 
 
.navigation { 
  margin-left: 50px; 
} 
 
.block--left-list { 
  display: flex; 
  align-items: center; 
} 
 
.navigation a { 
  margin-left: 15px; 
} 
 
.block--left { 
  display: flex; 
  padding: 20px; 
  box-sizing: border-box; 
  flex-direction: column; 
  justify-content: space-between; 
  max-height: 400px; 
} 
 
.swiper-container { 
  display: block; 
  max-width: 585px; 
} 
 
.block--right { 
  position: relative; 
} 
 
.block--right a { 
  display: block; 
  z-index: 999; 
  position: absolute; 
  right: 20px; 
  bottom: 20px; 
 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width: 120px; 
  height: 40px; 
  background-color: red; 
  border-radius: 40px; 
  color: #fff; 
} 
 
.active-black { 
  color: black; 
} 
 
/* Цвета для первой ссылки*/ 
 
.active-green { 
  color: yellowgreen; 
} 
.active-blue { 
  color: aqua; 
} 
.active-violet { 
  color: darkmagenta; 
} 
 
.logo-svg.active-green { 
  fill: yellowgreen; 
} 
.logo-svg.active-blue { 
  fill: aqua; 
} 
.logo-svg.active-violet { 
  fill: darkmagenta; 
} 
 
/* Цвета для второй ссылки*/ 
 
.active-crimson { 
  color: crimson; 
} 
.active-magenta { 
  color: magenta; 
} 
.active-navy { 
  color: navy; 
} 
 
.logo-svg.active-crimson { 
  fill: crimson; 
} 
.logo-svg.active-magenta { 
  fill: magenta; 
} 
.logo-svg.active-navy { 
  fill: navy; 
} 
 
/* Цвета для третьей ссылки*/ 
 
.active-coral { 
  color: coral; 
} 
.active-chartreuse { 
  color: chartreuse; 
} 
.active-teal { 
  color: teal; 
} 
 
.logo-svg.active-coral { 
  fill: coral; 
} 
.logo-svg.active-chartreuse { 
  fill: chartreuse; 
} 
.logo-svg.active-teal { 
  fill: teal; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<nav class="navigation"> 
        <ul class="block--left-list"> 
          <li class="block--left-item link-1"> 
            <a href="#">отделка</a> 
          </li> 
          <li class="block--left-item link-2"> 
            <a href="#">архитектура</a> 
          </li> 
          <li class="block--left-item link-3"> 
            <a href="#">планировки</a> 
          </li> 
        </ul> 
      </nav>