主页 / 问题 / 900450
Accepted
VanilJS
Asked:2020-10-31 22:40:23 +0000 UTC2020-10-31 22:40:23 +0000 UTC

为什么图像替换不取决于所选的选择？

  • 772

在两个程式化选择的帮助下，有一个类似于颜色构造函数的东西。
为什么图片没有变成选择中选中的那张？
PS 任务已解决。沙盒和代码示例中的正确解决方案。谁应该接受。带有指向 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>

javascript

2 个回答

  1. 因为您的目标是错误的方向并为错误的元素添加了一个类）

    在此处输入图像描述

    您形成一个列表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;
        }
    }
    • 1
  2. Best Answer

    在异步 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>

    • 1

相关问题