jquery colorpick срабатывание по клику

[borockov]

Здравствуйте друзья, имеется вот такая небольшая наработка http://baxtex.ru/test/index.html , в основе лежит svg, все элементы бабочек объединены под одним классом #babochka, цветы классом #cvet, точки классом #tk, стоит следующая задача, необходимо реализовать такую штуку, что бы при клике например на бабочку, у нас выплывал колорпикер,и я выбирал нужный мне цвет, и все бабочки на странице принимали выбранный цвет, так как в js в общем то я слишком слаб, пришел за помощью к вам, буду благодарен, если объясните как это работает, так же во вложении добавил архив с файлами странички.
P.s буду благодарен за помощь

[borockov]

borockov,


Это не классы, а id, но id должны быть уникальными
id
Иначе ничего работать не будет.
Переделывайте id на class

допустим, я переделал, а дальше как мне подключить к странице колопикер?

[borockov]

Что то я совсем запутался, у меня никак не получается внутри svg подключить скрипты js

[Dilettante_Pro]

<style>
.ring { fill:red; }
.square { fill:green;}
#modal { position:absolute; display:none; }

</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
  var elems = document.querySelectorAll(".ring, .square"),
  curClass = "";

  [].forEach.call(elems, function(el) {
     el.addEventListener("click", function () {
            curClass = el.classList[0];
            modal.style.display = "block"; 
     });
  });
  modal.onchange = function() {
           var col = this.value;
           [].forEach.call(elems, function(it) {
               if(it.classList[0] == curClass) it.style.fill = col;
           });
           modal.style.display = "none";      
  }
});
</script>
<input id="modal" type="color">

<svg width="700px" height="200px"> 
   <circle class = "ring" cx="50px" cy="50px" r="25px"   />
   <circle class = "ring" cx="150px" cy="70px" r="25px"  />
   <rect class = "square" x="70px" y="100px" width="50px" height="50px"  />
   <rect class = "square" x="170px" y="30px" width="50px" height="50px"  />
</svg>

[Dilettante_Pro]

Вариант jQuery

<style>
.ring { fill:red; }
.square { fill:green;}
#modal { position:absolute; display:none; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$( function() {
   var elems = $(".ring, .square"),
         picker = $("#modal"),
         that = '';
   elems.on("click", function () { 
             that = this;
             picker.show();
   });
   picker.on("change", function () {
       var col = $(this).val(); 
       elems.each(function(i, el){
                 if($(that).attr('class') == $(el).attr('class')) el.style.fill = col;
       });
       picker.hide();
   });
});
</script>
<input id="modal" type="color">

<svg width="700px" height="200px"> 
   <circle class = "ring" cx="50px" cy="50px" r="25px"   />
   <circle class = "ring" cx="150px" cy="70px" r="25px"  />
   <rect class = "square" x="70px" y="100px" width="50px" height="50px"  />
   <rect class = "square" x="170px" y="30px" width="50px" height="50px"  />
</svg>

[borockov]

Огромное тебе спасибо!!!! Очень сильно мне помог