Speculant,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.el, .svs{
height: 20px;
width: 20px;
border-radius: 100%;
background-color: #000000;
margin-bottom: 5px;
}
.el.active {
background-color:bisque;
}
.svs{
background-color: yellow;
}
.svs.active{
background-color: red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
var el = $(".el"),
opt = $(".option"),
k = 3,
temp;
for (var i = 0; i < k; i++) $('<div class="svs" ><img src=""></div>').appendTo(opt);
temp = $(".svs", opt).detach();
el.click(function() {
var elem = $(this);
el.not(elem.toggleClass("active")).removeClass("active");
if (elem.is(".active")) {
var key = elem.data("key");
temp.appendTo(opt).removeClass("active");
if (key != void 0) temp.eq(key).addClass("active")
} else temp.detach()
});
opt.on("click", ".svs", function() {
var elem = $(this);
var key = elem.index();
temp.not($(this).toggleClass("active")).removeClass("active");
var block = el.filter(".active");
if (elem.is(".active")) block.data({
key: key
});
else block.removeData("key");
show();
})
function show()
{
var data = $.map(el, function(elem) {
var key = $(elem).data("key");
return key != void 0 ? key : "no"
});
$('.out').html(JSON.stringify(data, null, 4))
}
});
</script>
</head>
<body>
<div class="el" ><img src=""></div>
<div class="el" ><img src=""></div>
<div class="el" ><img src=""></div>
-----------------------
<div class="option"></div>
<div class="out"></div>
</body>
</html>
