Question

I have the following script:

$(function(){
    //all hover and click logic for buttons
    $(".fg-button:not(.ui-state-disabled)")
    .hover(
        function(){ 
            $(this).addClass("ui-state-hover"); 
        },
        function(){ 
            $(this).removeClass("ui-state-hover"); 
        }
    )
    .mousedown(function(){
        $(this).parents('.fg-buttonset-single:first').find(".fg-button.ui-state-active").removeClass("ui-state-active");
        if( $(this).is('.ui-state-active.fg-button-toggleable, .fg-buttonset-multi .ui-state-active') ){ $(this).removeClass("ui-state-active"); }
        else {$(this).addClass("ui-state-active");} 
    })
    .mouseup(function(){
        if(! $(this).is('.fg-button-toggleable, .fg-buttonset-single .fg-button,  .fg-buttonset-multi .fg-button') ){
            $(this).removeClass("ui-state-active");
        }
    });
});

and html:

<div class="fg-buttonset fg-buttonset-multi">
<button class="fg-button ui-state-default">Small</button>
<button class="fg-button ui-state-default">Medium</button>
<button class="fg-button ui-state-default">Large</button>
</div>

This toggles the buttons on and off, I need to string a variable var size in the format of:

eg.
Small|Medium

based on selections made (example above small and medium selected).

Please note that the number of size options will vary considerably and will not always just be small, med and large.

Thanks

Answer 1

This will give you a size variable containing a “|” delimited string for each buttonset.

$(".fg-buttonset").each(function() {
    var size = $(this).find(".ui-state-active").map(function() {
        return $(this).text();
    }).join("|");   
});