How to use snap to fill color for the whole group of elements in SVG

Question

I want to fill color for the whole group of elements for a SVG image. I've grouped my elements together with the tag like this

<g id="calendar">
<path d="M265.8,631.3l-26.7,8c1.7,5.4,3.5,10.8,5.6,16l26,-9.9c-1.8,-4.6,-3.4,-9.3,-4.9,-14.1Z" class="g1_1"value="2013-10-15"></path>
<path d="M528,769.2l8,26.7c5.5,-1.7,10.8,-3.6,16,-5.6l-10,-26c-4.6,1.8,-9.3,3.4,-14,4.9Z" class="g1_1"></path>
<path d="M212.6,647.2l-39.7,11.9c2.2,7.1,4.6,14.1,7.3,21l38.7,-14.9c-2.3,-5.9,-4.4,-11.9,-6.3,-18Z" class="g1_1"value="2013-10-01"></path>
<path d="M387.3,316.5L375.4,276.8c-7.1,2.2,-14.1,4.6,-21,7.3l14.9,38.7c5.9,-2.3,11.9,-4.4,18,-6.3Z" class="g1_1" value="2013-07-02"></path>
</g>

Now I want to have a button on my webpage, and when I clicked specific event, and then click that button, the whole group of elements will be filled with specific color decided by that event. I've done the function like this

   $("#quickevent").on("click",function(){
    var date = $("#date").val();

    var username = "<?php echo $_SESSION['username']; ?>";
    if(swim){
   var color = $("#swimming").css("background-color");
   var detail = $("#swimming").text();
   }
   if(dan){
   var color = $("#dancing").css("background-color");
   var detail = $("#dancing").text();
   }
   if(eat){
   var color = $("#eating").css("background-color");
   var detail = $("#eating").text();
   }
  if(read){
   var color = $("#reading").css("background-color");
   var detail = $("#reading").text();
   }
   if(skate){
    var color = $("#skating").css("background-color");
    var detail = $("#skating").text();
   }

           var svg_color = Snap("#svg");
           var svg_element = svg_color.selectAll("#innercalendar");
           svg_element.attr({fill: color});

    $.post("postdb.php",{"date" : date,"color" : color,"username" : username, "detail" : detail},function(data,status){});
    $("#date").val("");
});

but I don't know how to fill the color for the whole group of elements in SVG. Can anyone teach me how to do that? (Now I've tried new way, the error was disappeared, but it is not working)

Answer 1

If you want to click one thing and change all paths to one color do:

$('#nameofwhattoclick').on("click", function() {
    $('#path1, #path2, #path3').css({ fill: "#ffffff" });
});

or to click one thing and change one thing do:

$('#nameofwhattoclick1').on("click", function() {
    $('#path1').css({ fill: "#000000" });
});
$('#nameofwhattoclick2').on("click", function() {
    $('#path2').css({ fill: "#000000" });
});

fill: #ffffff replace with your color, path1, path2, path3 replace with the names of your paths

---

only way to do a group change would be in css with the * selector, but you could only use the available dynamic pseudo classes which doesn't include clicked

#calandar:hover * {
    fill: #00FF00;
}