Заменить переменную строку при изменении

Question

Мне нужно создать строку внутри переменной «code», которая добавляет выбранное значение изображения в кодовую переменную.Конечный код должен выглядеть, например, так: «test1 / A = 1a / B = 1b» или «test2 / A = 1b / B = 1a» и так далее.Если пользователь редактирует значок «A», он должен заменить это значение внутри кода, а не складываться, как в фрагменте.

См. Фрагмент ниже.

let code;

$(".selectIco").click(function(){
  $(".iconSelect").html("");
  $(this).clone().appendTo(".iconSelect");
})

let thisIcon;
$(".clone").on("click", function() {
  thisIcon = $(this);
  $(".iconSelect").html("");
    $(".icons").slideDown("1000");

function imagePicker() {
  $(".selectIco").on("click", function() {
    $(".iconSelect").html("");
    $(this).clone().appendTo(".iconSelect");
    $(thisIcon).html("");
    $(".iconSelect img").clone().appendTo(thisIcon);
  })
}
imagePicker();
    })

$(".test1").click(function(){
  code = "test1";
  console.log(code);
})
$(".test2").click(function(){
  code = "test2";
  console.log(code);
})

//code
  $('.cloner1').bind("DOMSubtreeModified",function(){
    if ($(this).children("img").length > 0 ) {
      iconA = $(this).children(".selectIco").attr("value");
      code += "A=" + iconA;

      console.log("export of code = " + code);

    }
  });
    $('.cloner2').bind("DOMSubtreeModified",function(){
    if ($(this).children("img").length > 0 ) {
      iconA = $(this).children(".selectIco").attr("value");
      code += "B=" + iconA;

      console.log("export of code = " + code);

    }
  });

.iconSelect {
  height 90px;
  width: 90px;
  border: 2px solid blue;
}
.clone {
  float:left;
  margin-right: 10px;
  height:120px;
  width: 120px;
  background-color: pink;
}
.icons {
  display: none;
}
.test1, .test2 {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>first</h1>
<div class="test1">clickme</div>
or
<div class="test2">clickme</div>
<br/>

<h1>second</h1>
<div class="clone cloner1">A</div>
<div class="clone cloner2">B</div>

<div class="iconSelect"></div>
<div class="icons">
  <img  class="selectIco" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/100px-Twitter_bird_logo_2012.svg.png" value="/1a">
  <img class="selectIco" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Gmail_Icon.svg/100px-Gmail_Icon.svg.png" value="/1b">
</div>

Answer 1

Измените последние два раза, когда вы изменяете code с += на =, и все работает нормально:

let code;

$(".selectIco").click(function() {
  $(".iconSelect").html("");
  $(this).clone().appendTo(".iconSelect");
})

let thisIcon;
$(".clone").on("click", function() {
  thisIcon = $(this);
  $(".iconSelect").html("");
  $(".icons").slideDown("1000");

  function imagePicker() {
    $(".selectIco").on("click", function() {
      $(".iconSelect").html("");
      $(this).clone().appendTo(".iconSelect");
      $(thisIcon).html("");
      $(".iconSelect img").clone().appendTo(thisIcon);
    })
  }
  imagePicker();
})

$(".test1").click(function() {
  code = "test1";
  console.log(code);
})
$(".test2").click(function() {
  code = "test2";
  console.log(code);
})

//code
$('.cloner1').bind("DOMSubtreeModified", function() {
  if ($(this).children("img").length > 0) {
    iconA = $(this).children(".selectIco").attr("value");
    code = "A=" + iconA;

    console.log("export of code = " + code);

  }
});
$('.cloner2').bind("DOMSubtreeModified", function() {
  if ($(this).children("img").length > 0) {
    iconA = $(this).children(".selectIco").attr("value");
    code = "B=" + iconA;

    console.log("export of code = " + code);

  }
});

.iconSelect {
  height 90px;
  width: 90px;
  border: 2px solid blue;
}

.clone {
  float: left;
  margin-right: 10px;
  height: 120px;
  width: 120px;
  background-color: pink;
}

.icons {
  display: none;
}

.test1,
.test2 {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>first</h1>
<div class="test1">clickme</div>
or
<div class="test2">clickme</div>
<br/>

<h1>second</h1>
<div class="clone cloner1">A</div>
<div class="clone cloner2">B</div>

<div class="iconSelect"></div>
<div class="icons">
  <img class="selectIco" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/100px-Twitter_bird_logo_2012.svg.png" value="/1a">
  <img class="selectIco" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Gmail_Icon.svg/100px-Gmail_Icon.svg.png" value="/1b">
</div>