To generate a string inside the "code" variable that combines the selected image values, the final code should appear similar to: "test1/A=1a/B=1b" or "test2/A=1b/B=1a", etc. If the user modifies icon "A," it should replace the value in the code instead of adding to it like in the example below.
Please refer to the snippet below for more details.
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>