Replace variable string on change

Question

I need to create string inside "code" variable that adds up selected image value into code variable. Final code should look for example like this: "test1/A=1a/B=1b" or "test2/A=1b/B=1a" and so on. If user edits icon "A" it should replace this value inside code and not add up like in snippet.

See snippet below.

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>

Jack Bashford · Accepted Answer · 2019-02-19 08:39:40Z

2

Change the last two times you're modifying code from += to = and it works fine:

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>

answered Feb 19, 2019 at 8:39

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Adam95 Over a year ago

It overwrites whole code. I want to add it up. I need to leave "test1" or "test2" intact inside code and then add up A=/1aB=/1b. So final code would look like this for example: test1A=/1aB=/2a etc.

Jack Bashford Over a year ago

Sorry, I don't understand how your adding works. Could you clarify please?

Adam95 Over a year ago

Well it doesnt work, thats why im here :D Concept is easy. In first step, you chose test1 or test2 that adds "test1" or "test2" into code variable as string. In second step i want to leave "test1" or "test2" intact inside code variable and add up to it values of images inside .cloner1 and .cloner2 along with its positions. Cloner1 is position "A" and it has image with value /1a -> test1A=/1a... Cloner2 is position "B" and it has image with value /1b -> test1A=/1aB=/1b.

Jack Bashford Over a year ago

So if you select test2, then cloner2, you'll get test2B=/1b, but if you select test1, then cloner2, then cloner1, you'll get test1B=/1bA=/1a?

Adam95 Over a year ago

It depends on whats inside cloner2 or cloner1. If you want to have img /1b inside cloner2 then it would be test2B=/1b. If you want to have /1b in cloner2 and /1a in cloner1 then you get test1B=/1bA=/1a. test1 or test2 is there just so i dont delete whole string inside code variable

|

Collectives™ on Stack Overflow

Replace variable string on change

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related