Почему не работает замена картинки в зависимости от выбранного селекта?

175
20 марта 2019, 02:20

Есть что-то типа конструктора цвета с помощью двух стилизованных селектов.
Почему картинка не меняется на выбранную в селектах?
P.S. ЗАДАЧА РЕШЕНА. ВЕРНОЕ РЕШЕНИЕ В ПЕСОЧНИЦЕ И В ПРИМЕРЕ КОДА. КОМУ НАДО БЕРИТЕ. стилизованные селекты с конструктором картинок ссылка на песочницу jsFiddle 

// СТИЛИЗАЦИЯ СЕЛЕКТА ВЫБОРА ЦВЕТА МАТЕРИАЛА 
$(document).ready(function (){ 
    $('#materialColor').wrap('<div class="select_wrapper"> <i id="arrowChevron" class="fa fa-chevron-down"></i></div>') 
    $('#materialColor').parent().prepend(function() { 
        return '<span>'+ $(this).find(':selected').text() +'</span>' 
    }); 
    $('#materialColor').parent().children('span').width($('#materialColor').width()); 
    $('#materialColor').css('display', 'none'); 
    $('#materialColor').parent().append('<ul class="select_inner"></ul>'); 
    $('#materialColor').children().each(function(){ 
        var opttext = $(this).text(); 
        var optval = $(this).val(); 
        $('#materialColor').parent().children('.select_inner').append('<li id="' + optval + '">' + opttext + '</li>'); 
    }); 
    $('#materialColor').parent().find('li').on('click', function (){ 
        var cur = $(this).attr('id'); 
        $('#materialColor').parent().children('span').text($(this).text()); 
        $('#materialColor').children().removeAttr('selected'); 
        $('#materialColor').children('[value="'+cur+'"]').attr('selected','selected'); 
        console.log($('#materialColor').children('[value="'+cur+'"]').text()); 
 
        // вызов скрипта смены картинки материала 
        onChangeSelect(); 
    }); 
    $('#materialColor').parent().on('click', function (){ 
        $(this).find('ul').slideToggle('fast'); 
    }); 
}); 
 
 
// СТИЛИЗАЦИЯ СЕЛЕКТА ВЫБОРА ЦВЕТА КАНТА 
$(document).ready(function (){ 
    $('#kantcolor').wrap('<div id="select_wrapper" class="select_wrapper"> <i id="arrowChevron" class="fa fa-chevron-down"></i></div>') 
    $('#kantcolor').parent().prepend(function() { 
        return '<span>'+ $(this).find(':selected').text() +'</span>' 
    }); 
    $('#kantcolor').parent().children('span').width($('#kantcolor').width()); 
    $('#kantcolor').css('display', 'none'); 
    $('#kantcolor').parent().append('<ul class="select_inner"></ul>'); 
    $('#kantcolor').children().each(function(){ 
        var opttext = $(this).text(); 
        var optval = $(this).val(); 
        $('#kantcolor').parent().children('.select_inner').append('<li id="' + optval + '">' + opttext + '</li>'); 
    }); 
    $('#kantcolor').parent().find('li').on('click', function (){ 
        var cur = $(this).attr('id'); 
        $('#kantcolor').parent().children('span').text($(this).text()); 
        $('#kantcolor').children().removeAttr('selected'); 
        $('#kantcolor').children('[value="'+cur+'"]').attr('selected','selected'); 
        console.log($('#kantcolor').children('[value="'+cur+'"]').text()); 
 
        // вызов скрипта смены картинки канта 
        onChangeSelects(); 
    }); 
    $('#kantcolor').parent().on('click', function (){ 
        $(this).find('ul').slideToggle('fast'); 
 
    }); 
}); 
 
// ЗАМЕНА КАРТИНКИ МАТЕРИАЛА 
function onChangeSelect() { 
 
    // читаем значение выбранного селекта у материала 
    selectedMaterial = $('#materialColor').val(); 
 
    // скрываем предыдущую выбранную картинку материала 
    var materialNode = document.querySelector('.costruct-karpet'); // ищем ноду 
    materialNode.querySelectorAll('.material').forEach(n => n.classList.remove('selected')); 
 
    // Сравнение содержимого выбранного селекта у канта. Какой цвет выбран, такая картинка появилась 
    switch (selectedMaterial) { 
        case 'black': 
            materialNode.querySelector('#black').classList.add('selected'); 
            break; 
        case 'gray': 
            materialNode.querySelector('#gray').classList.add('selected'); 
            break; 
        case 'beige': 
            materialNode.querySelector('#beige').classList.add('selected'); 
            break; 
        case 'red': 
            materialNode.querySelector('#red').classList.add('selected'); 
            break; 
        case 'brown': 
            materialNode.querySelector('#brown').classList.add('selected'); 
            break; 
        case 'blue': 
            materialNode.querySelector('#blue').classList.add('selected'); 
            break; 
        case 'orange': 
            materialNode.querySelector('#orange').classList.add('selected'); 
            break; 
        case 'purple': 
            materialNode.querySelector('#purple').classList.add('selected'); 
            break; 
        case 'green': 
            materialNode.querySelector('#green').classList.add('selected'); 
            break; 
        case 'white': 
            materialNode.querySelector('#white').classList.add('selected'); 
            break; 
        case 'yellow': 
            materialNode.querySelector('#yellow').classList.add('selected'); 
            break; 
    } 
} 
 
 
// ЗАМЕНА КАРТИНКИ КАНТА 
function onChangeSelects() { 
 
    // читаем значение выбранного селекта канта 
    selectedKant = $('#kantcolor').val(); 
 
    // скрываем предыдущую выбранную картинку канта 
    var kantNode = document.querySelector('.costruct-karpet'); // ищем ноду 
    kantNode.querySelectorAll('.kant').forEach(n => n.classList.remove('selected')); 
 
    // Сравнение содержимого выбранного селекта у канта. Какой цвет выбран, такая картинка появилась 
    switch (selectedKant) { 
        case 'kblack': 
            kantNode.querySelector('#kblack').classList.add('selected'); 
// вот эта часть рабочая, все что ниже можно переписать основываясь на этом примере 
            break; 
        case 'kgray': 
            kantNode.querySelector('#kgray').classList.add('selected'); 
            break; 
        case 'kdgray': 
            kantNode.querySelector('#kdgray').classList.add('selected'); 
            break; 
        case 'kbeige': 
            kantNode.querySelector('#kbeige').classList.add('selected'); 
            break; 
        case 'kred': 
            kantNode.querySelector('#kred').classList.add('selected'); 
            break; 
        case 'kbrown': 
            kantNode.querySelector('#kbrown').classList.add('selected'); 
            break; 
        case 'kblue': 
            kantNode.querySelector('#kblue').classList.add('selected'); 
            break; 
        case 'kdblue': 
            kantNode.querySelector('#kdblue').classList.add('selected'); 
            break; 
        case 'korange': 
            kantNode.querySelector('#korange').classList.add('selected'); 
            break; 
        case 'kpurple': 
            kantNode.querySelector('#kpurple').classList.add('selected'); 
            break; 
        case 'kgreen': 
            kantNode.querySelector('#kgreen').classList.add('selected'); 
            break; 
        case 'kwhite': 
            kantNode.querySelector('#kwhite').classList.add('selected'); 
            break; 
        case 'kyellow': 
            kantNode.querySelector('#kyellow').classList.add('selected'); 
            break; 
    } 
}
.costruct-karpet { 
    position: relative; 
    display: block; 
    height: 225px; 
    width: 180px; 
    margin: auto; 
} 
 
.costruct-karpet img { 
    position: absolute; 
    left: 0; 
    top: 0; 
    display: none; 
} 
 
.selected { 
    display: block !important; 
} 
 
/* Селект */ 
/*select start*/ 
.select_wrapper i { 
    color: #757575; 
    float: right; 
    margin-top: -16px; 
    display: block; 
    transition: 0.3s ease-in-out; 
} 
 
.rotate { 
    transform: rotate(180deg); 
    animation-duration: 5s; 
    transition: 0.3s ease-in-out; 
} 
 
.select_wrapper { 
    border: 1px solid #bfbfbf; 
    font: 14px/18px Acrom; 
    color: #000; 
    width: 200px; 
        padding: 7px 12px 11px 33px; 
    margin-bottom: 15px; 
    display: inline-block; 
     
    cursor: pointer; 
    position: relative; 
    -moz-transition-duration: .2s; 
    -webkit-transition-duration: .2s; 
    -ms-transition-duration: .2s; 
    -o-transition-duration: .2s; 
    transition-duration: .2s; 
} 
.select_wrapper:focus { 
    border: 1px solid #235D81; 
    -moz-transition-duration: .2s; 
    -webkit-transition-duration: .2s; 
    -ms-transition-duration: .2s; 
    -o-transition-duration: .2s; 
    transition-duration: .2s; 
} 
.select_wrapper span { 
    display: block; 
    margin: 7px 0 0 0; 
    width: 100% !important; 
} 
.select_wrapper .select_inner { 
    background: #fff; 
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); 
    color: #687278; 
    display: none; 
    position: absolute; 
    left: 0; 
    top: 38px; 
    width: 99%; 
    z-index: 3; 
    border: 1px solid #fff; 
    height: 400px; 
    overflow: auto; 
} 
.select_wrapper ul { 
    padding-left: 0; 
    margin-left: 0; 
} 
.select_wrapper .select_inner li { 
    list-style: none; 
    border-bottom: 1px solid #eee; 
    padding: 10px 20px; 
} 
.select_wrapper .select_inner li:hover { 
    background: #eee; 
} 
.select_wrapper .select_inner li:last-child { 
    border: none; 
    border-radius: 0 0 5px 5px; 
} 
.select_wrapper .select_inner li:first-child { 
    border-radius: 5px 5px 0 0; 
} 
/*select end*/
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<!-- Селект для цвета материала --> 
<select name="materialColor" class="materialColor" id="materialColor"> 
		    <option value="" selected="selected">Выберите цвет материала</option> 
		    <option value="black">Черный</option> 
		    <option value="gray">Серый</option> 
		    <option value="beige">Бежевый</option> 
		    <option value="red">Красный</option> 
		    <option value="brown">Коричневый</option> 
		    <option value="blue">Синий</option> 
		    <option value="orange">Оранжевый</option> 
		    <option value="purple">Фиолетовый</option> 
		    <option value="green">Салатовый</option> 
		    <option value="white">Белый</option> 
		    <option value="yellow">Желтый</option> 
</select> 
     
<!-- Селект для цвета канта --> 
<select name="kantcolor" class="kantcolor" id="kantcolor"> 
		    <option value="" selected="selected">Выберите цвет канта</option> 
		    <option value="kblack">Черный</option> 
		    <option value="kgray">Серый</option> 
		    <option value="kdgray">Темно-серый</option> 
		    <option value="kred">Красный</option> 
		    <option value="kdblue">Темно-синий</option> 
		    <option value="kblue">Синий</option> 
		    <option value="kbeige">Бежевый</option> 
		    <option value="kwhite">Белый</option> 
		    <option value="kbrown">Коричневый</option> 
		    <option value="korange">Оранжевый</option> 
		    <option value="kgreen">Салатовый</option> 
		    <option value="kwhite">Белый</option> 
		    <option value="kyellow">Желтый</option> 
		    <option value="kpurple">Фиолетовый</option> 
</select> 
 
<!-- Контейнер с наложениями картинок --> 
<div class="costruct-karpet"> 
          <!-- Картинки материала --> 
          <img class="material selected" id="black" src="http://autogoods.su/lend/images/colors/black.png" alt=""> 
          <img class="material" id="gray" src="http://autogoods.su/lend/images/colors/gray.png" alt=""> 
          <img class="material" id="beige" src="http://autogoods.su/lend/images/colors/beige.png" alt=""> 
          <img class="material" id="red" src="http://autogoods.su/lend/images/colors/red.png" alt=""> 
          <img class="material" id="brown" src="http://autogoods.su/lend/images/colors/brown.png" alt=""> 
          <img class="material" id="blue" src="http://autogoods.su/lend/images/colors/blue.png" alt=""> 
          <img class="material" id="orange" src="http://autogoods.su/lend/images/colors/orange.png" alt=""> 
          <img class="material" id="purple" src="http://autogoods.su/lend/images/colors/purple.png" alt=""> 
          <img class="material" id="green" src="http://autogoods.su/lend/images/colors/green.png" alt=""> 
          <img class="material" id="white" src="http://autogoods.su/lend/images/colors/white.png" alt=""> 
          <img class="material" id="yellow" src="http://autogoods.su/lend/images/colors/yellow.png" alt=""> 
           
          <!-- Картинки канта --> 
          <img class="kant" id="kblack" src="http://autogoods.su/lend/images/colors/kblack.png" alt="" > 
          <img class="kant" id="kyellow" src="http://autogoods.su/lend/images/colors/kyellow.png" alt="" > 
          <img class="kant" id="kgray" src="http://autogoods.su/lend/images/colors/kgray.png" alt="" > 
          <img class="kant" id="kdgray" src="http://autogoods.su/lend/images/colors/kdgray.png" alt="" > 
          <img class="kant" id="kblue" src="http://autogoods.su/lend/images/colors/kblue.png" alt="" > 
          <img class="kant" id="kdblue" src="http://autogoods.su/lend/images/colors/kdblue.png" alt="" > 
          <img class="kant" id="kbeige" src="http://autogoods.su/lend/images/colors/kbeige.png" alt="" > 
          <img class="kant" id="kbrown" src="http://autogoods.su/lend/images/colors/kbrown.png" alt="" > 
          <img class="kant selected" id="kred" src="http://autogoods.su/lend/images/colors/kred.png" alt="" > 
          <img class="kant" id="korange" src="http://autogoods.su/lend/images/colors/korange.png" alt="" > 
          <img class="kant" id="kgreen" src="http://autogoods.su/lend/images/colors/kgreen.png" alt="" > 
          <img class="kant" id="kwhite" src="http://autogoods.su/lend/images/colors/kwhite.png" alt="" > 
          <img class="kant" id="kpurple" src="http://autogoods.su/lend/images/colors/kpurple.png" alt="" > 
</div>

Answer 1

Вы в асинхронном методе forEach запускали удаление класса, а потом добавляли новый. Но удаление не успевало отработать и в итоге вы сначала добавляли selected, а потом этот класс у всех удалялся

И к стати на autogoods проблемы с сертификатом, надо добавить в исключения, а то картинки не грузятся

// СТИЛИЗАЦИЯ СЕЛЕКТА ВЫБОРА ЦВЕТА МАТЕРИАЛА 
$(document).ready(function() { 
  $('#materialColor').wrap('<div class="select_wrapper"> <i id="arrowChevron" class="fa fa-chevron-down"></i></div>') 
  $('#materialColor').parent().prepend(function() { 
    return '<span>' + $(this).find(':selected').text() + '</span>' 
  }); 
  $('#materialColor').parent().children('span').width($('#materialColor').width()); 
  $('#materialColor').css('display', 'none'); 
  $('#materialColor').parent().append('<ul class="select_inner"></ul>'); 
  $('#materialColor').children().each(function() { 
    var opttext = $(this).text(); 
    var optval = $(this).val(); 
    $('#materialColor').parent().children('.select_inner').append('<li id="' + optval + '">' + opttext + '</li>'); 
  }); 
  $('#materialColor').parent().find('li').on('click', function() { 
    var cur = $(this).attr('id'); 
    $('#materialColor').parent().children('span').text($(this).text()); 
    $('#materialColor').children().removeAttr('selected'); 
    $('#materialColor').children('[value="' + cur + '"]').attr('selected', 'selected'); 
    console.log($('#materialColor').children('[value="' + cur + '"]').text()); 
 
    // вызов скрипта смены картинки материала 
    onChangeSelect(); 
  }); 
  $('#materialColor').parent().on('click', function() { 
    $(this).find('ul').slideToggle('fast'); 
  }); 
}); 
 
 
// СТИЛИЗАЦИЯ СЕЛЕКТА ВЫБОРА ЦВЕТА КАНТА 
$(document).ready(function() { 
  $('#kantcolor').wrap('<div id="select_wrapper" class="select_wrapper"> <i id="arrowChevron" class="fa fa-chevron-down"></i></div>') 
  $('#kantcolor').parent().prepend(function() { 
    return '<span>' + $(this).find(':selected').text() + '</span>' 
  }); 
  $('#kantcolor').parent().children('span').width($('#kantcolor').width()); 
  $('#kantcolor').css('display', 'none'); 
  $('#kantcolor').parent().append('<ul class="select_inner"></ul>'); 
  $('#kantcolor').children().each(function() { 
    var opttext = $(this).text(); 
    var optval = $(this).val(); 
    $('#kantcolor').parent().children('.select_inner').append('<li id="' + optval + '">' + opttext + '</li>'); 
  }); 
  $('#kantcolor').parent().find('li').on('click', function() { 
    var cur = $(this).attr('id'); 
    $('#kantcolor').parent().children('span').text($(this).text()); 
    $('#kantcolor').children().removeAttr('selected'); 
    $('#kantcolor').children('[value="' + cur + '"]').attr('selected', 'selected'); 
    console.log($('#kantcolor').children('[value="' + cur + '"]').text()); 
 
    // вызов скрипта смены картинки канта 
    onChangeSelects(); 
  }); 
  $('#kantcolor').parent().on('click', function() { 
    $(this).find('ul').slideToggle('fast'); 
 
  }); 
}); 
 
// ЗАМЕНА КАРТИНКИ МАТЕРИАЛА 
function onChangeSelect() { 
  // читаем значение выбранного селекта у материала 
  var selectedMaterial = $('#materialColor').val(); 
 
  document.querySelectorAll('.costruct-karpet .material').forEach(n => { 
    n.classList.remove('selected'); 
    if (n.id === selectedMaterial) { 
      n.classList.add('selected'); 
    } 
  }); 
} 
 
// ЗАМЕНА КАРТИНКИ КАНТА 
function onChangeSelects() { 
  // читаем значение выбранного селекта канта 
  var selectedKant = $('#kantcolor').val(); 
   
  document.querySelectorAll('.costruct-karpet .kant').forEach(n => { 
    n.classList.remove('selected'); 
    if (n.id === selectedKant) { 
      n.classList.add('selected'); 
    } 
  }); 
}
.costruct-karpet { 
  position: relative; 
  display: block; 
  height: 225px; 
  width: 180px; 
  margin: auto; 
} 
 
.costruct-karpet img { 
  position: absolute; 
  left: 0; 
  top: 0; 
  display: none; 
} 
 
.selected { 
  display: block !important; 
} 
 
 
/* Селект */ 
 
 
/*select start*/ 
 
.select_wrapper i { 
  color: #757575; 
  float: right; 
  margin-top: -16px; 
  display: block; 
  transition: 0.3s ease-in-out; 
} 
 
.rotate { 
  transform: rotate(180deg); 
  animation-duration: 5s; 
  transition: 0.3s ease-in-out; 
} 
 
.select_wrapper { 
  border: 1px solid #bfbfbf; 
  font: 14px/18px Acrom; 
  color: #000; 
  width: 200px; 
  padding: 7px 12px 11px 33px; 
  margin-bottom: 15px; 
  display: inline-block; 
  cursor: pointer; 
  position: relative; 
  -moz-transition-duration: .2s; 
  -webkit-transition-duration: .2s; 
  -ms-transition-duration: .2s; 
  -o-transition-duration: .2s; 
  transition-duration: .2s; 
} 
 
.select_wrapper:focus { 
  border: 1px solid #235D81; 
  -moz-transition-duration: .2s; 
  -webkit-transition-duration: .2s; 
  -ms-transition-duration: .2s; 
  -o-transition-duration: .2s; 
  transition-duration: .2s; 
} 
 
.select_wrapper span { 
  display: block; 
  margin: 7px 0 0 0; 
  width: 100% !important; 
} 
 
.select_wrapper .select_inner { 
  background: #fff; 
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); 
  color: #687278; 
  display: none; 
  position: absolute; 
  left: 0; 
  top: 38px; 
  width: 99%; 
  z-index: 3; 
  border: 1px solid #fff; 
  height: 400px; 
  overflow: auto; 
} 
 
.select_wrapper ul { 
  padding-left: 0; 
  margin-left: 0; 
} 
 
.select_wrapper .select_inner li { 
  list-style: none; 
  border-bottom: 1px solid #eee; 
  padding: 10px 20px; 
} 
 
.select_wrapper .select_inner li:hover { 
  background: #eee; 
} 
 
.select_wrapper .select_inner li:last-child { 
  border: none; 
  border-radius: 0 0 5px 5px; 
} 
 
.select_wrapper .select_inner li:first-child { 
  border-radius: 5px 5px 0 0; 
} 
 
 
/*select end*/
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<!-- Селект для цвета материала --> 
<select name="materialColor" class="materialColor" id="materialColor"> 
  <option value="" selected="selected">Выберите цвет материала</option> 
  <option value="black">Черный</option> 
  <option value="gray">Серый</option> 
  <option value="beige">Бежевый</option> 
  <option value="red">Красный</option> 
  <option value="brown">Коричневый</option> 
  <option value="blue">Синий</option> 
  <option value="orange">Оранжевый</option> 
  <option value="purple">Фиолетовый</option> 
  <option value="green">Салатовый</option> 
  <option value="white">Белый</option> 
  <option value="yellow">Желтый</option> 
</select> 
 
<!-- Селект для цвета канта --> 
<select name="kantcolor" class="kantcolor" id="kantcolor"> 
  <option value="" selected="selected">Выберите цвет канта</option> 
  <option value="kblack">Черный</option> 
  <option value="kgray">Серый</option> 
  <option value="kdgray">Темно-серый</option> 
  <option value="kred">Красный</option> 
  <option value="kdblue">Темно-синий</option> 
  <option value="kblue">Синий</option> 
  <option value="kbeige">Бежевый</option> 
  <option value="kwhite">Белый</option> 
  <option value="kbrown">Коричневый</option> 
  <option value="korange">Оранжевый</option> 
  <option value="kgreen">Салатовый</option> 
  <option value="kwhite">Белый</option> 
  <option value="kyellow">Желтый</option> 
  <option value="kpurple">Фиолетовый</option> 
</select> 
 
<!-- Контейнер с наложениями картинок --> 
<div class="costruct-karpet"> 
  <!-- Картинки материала --> 
  <img class="material selected" id="black" src="https://autogoods.su/lend/images/colors/black.png" alt=""> 
  <img class="material" id="gray" src="https://autogoods.su/lend/images/colors/gray.png" alt=""> 
  <img class="material" id="beige" src="https://autogoods.su/lend/images/colors/beige.png" alt=""> 
  <img class="material" id="red" src="https://autogoods.su/lend/images/colors/red.png" alt=""> 
  <img class="material" id="brown" src="https://autogoods.su/lend/images/colors/brown.png" alt=""> 
  <img class="material" id="blue" src="https://autogoods.su/lend/images/colors/blue.png" alt=""> 
  <img class="material" id="orange" src="https://autogoods.su/lend/images/colors/orange.png" alt=""> 
  <img class="material" id="purple" src="https://autogoods.su/lend/images/colors/purple.png" alt=""> 
  <img class="material" id="green" src="https://autogoods.su/lend/images/colors/green.png" alt=""> 
  <img class="material" id="white" src="https://autogoods.su/lend/images/colors/white.png" alt=""> 
  <img class="material" id="yellow" src="https://autogoods.su/lend/images/colors/yellow.png" alt=""> 
 
  <!-- Картинки канта --> 
  <img class="kant" id="kblack" src="https://autogoods.su/lend/images/colors/kblack.png" alt=""> 
  <img class="kant" id="kyellow" src="https://autogoods.su/lend/images/colors/kyellow.png" alt=""> 
  <img class="kant" id="kgray" src="https://autogoods.su/lend/images/colors/kgray.png" alt=""> 
  <img class="kant" id="kdgray" src="https://autogoods.su/lend/images/colors/kdgray.png" alt=""> 
  <img class="kant" id="kblue" src="https://autogoods.su/lend/images/colors/kblue.png" alt=""> 
  <img class="kant" id="kdblue" src="https://autogoods.su/lend/images/colors/kdblue.png" alt=""> 
  <img class="kant" id="kbeige" src="https://autogoods.su/lend/images/colors/kbeige.png" alt=""> 
  <img class="kant" id="kbrown" src="https://autogoods.su/lend/images/colors/kbrown.png" alt=""> 
  <img class="kant selected" id="kred" src="https://autogoods.su/lend/images/colors/kred.png" alt=""> 
  <img class="kant" id="korange" src="https://autogoods.su/lend/images/colors/korange.png" alt=""> 
  <img class="kant" id="kgreen" src="https://autogoods.su/lend/images/colors/kgreen.png" alt=""> 
  <img class="kant" id="kwhite" src="https://autogoods.su/lend/images/colors/kwhite.png" alt=""> 
  <img class="kant" id="kpurple" src="https://autogoods.su/lend/images/colors/kpurple.png" alt=""> 
</div>

Answer 2

Потому что вы не туда прицеливаетесь и не тому элементу добавляете класс)

Вы формируете список ul>li и там прописываете те же идентификаторы что и для атрибутов img.

Уберите в ul>li идентификаторы и используйте вместо них дата-атрибуты и тогда все заработает

Или можно в лоб: ищем все внутри контейнера с небольшим примером:

    function onChangeSelects() {
            // читаем значение выбранного селекта канта
        selectedKant = $('#kantcolor').val();
        // скрываем предыдущую выбранную картинку канта 
        var kantNode = document.querySelector('.costruct-karpet'); // ищем ноду
        kantNode.querySelectorAll('.kant').forEach(n => n.classList.remove('selected'));
        // Сравнение содержимого выбранного селекта у канта. Какой цвет выбран, такая картинка появилась
        switch (selectedKant) {
            case 'kblack':
                kantNode.querySelector('#kblack').classList.add('selected'); 
// вот эта часть рабочая, все что ниже можно переписать основываясь на этом примере
                break;
            case 'kgray':
                document.getElementById('kgray').classList.add('selected');
                break;
            case 'kdgray':
                document.getElementById('kdgray').classList.add('selected');
                break;
            case 'kbeige':
                document.getElementById('kbeige').classList.add('selected');
                break;
            case 'kred':
                document.getElementById('kred').classList.add('selected');
                break;
            case 'kbrown':
                document.getElementById('kbrown').classList.add('selected');
                break;
            case 'kblue':
                document.getElementById('kblue').classList.add('selected');
                break;
            case 'kdblue':
                document.getElementById('kdblue').classList.add('selected');
                break;
            case 'korange':
                document.getElementById('korange').classList.add('selected');
                break;
            case 'kpurple':
                document.getElementById('kpurple').classList.add('selected');
                break;
            case 'kgreen':
                document.getElementById('kgreen').classList.add('selected');
                break;
            case 'kwhite':
                document.getElementById('kwhite').classList.add('selected');
                break;
            case 'kyellow':
                document.getElementById('kyellow').classList.add('selected');
                break;
        }
    }
READ ALSO
как заменить тэг p в div?
javascript

как заменить тэг p в div?

Надо заменить p на ans1,ans2 скриптом

 185
Node.js io.emit() Socketio.on тупит(не все передает)
javascript

Node.js io.emit() Socketio.on тупит(не все передает)

Есть код:

 174
Как вызвать мутацию из экшена
javascript

Как вызвать мутацию из экшена

Использую Vuejs, имеется вот такой actions:

 163
Должен ли я минифицировать мой css и javascript код в Laravel?
javascript

Должен ли я минифицировать мой css и javascript код в Laravel?

Javascript код веб сайта находятся в директории pulbic, должен ли я минифицировать свой код для готовой версии сайта ?

 154