I miss an easy way to determine the home or away team in the current version of the plugin when clicking the flag. Still doable, I guess, but I do not want to make the script too complex. So, can’t help you right away.
I made a simple change in the template on my development version (added ‘home’ or ‘away’ class to the flag div). And that allowed me to make a simple adjustment to the script. I also removed the inline style and added a toggle for a ‘team-selected’ class that one could use to style the selected team (name and flag). The below script can be used when I release my new version of the plugin.
/**
* Pick'em style predictions
* =========================
* Compatible with flex layout and click support on flag in v2.11.0 and above.
* Use CSS class 'team-selected' to style the selected team.
*/
jQuery( document ).ready( function() {
jQuery( '.matchinfo.input.new-layout div' ).filter( function() {
$this = jQuery( this );
return $this.attr( 'id' ) && $this.attr( 'id' ).substr( 0, 5 ) === 'match';
} )
.each( function() {
jQuery( 'div.score', this ).each( function( index ) {
$this = jQuery( this );
value = $this.text().replace( /\s/g, '' );
if ( value === '' && $this.children().length > 0 ) {
// the match is editable, so we hide the inputs and bind a click event
$this.siblings( '.home, .away, .flag' )
.css( 'cursor', 'pointer' )
.bind( 'click', function() {
$this = jQuery( this );
team = $this.hasClass( 'home' ) ? 'home' : 'away'; // home or away
$this.siblings( '.score' ).find( 'input[name^="_' + team + '"]' ).val( '1' );
$this.siblings( '.score' ).find( ':not(input[name^="_' + team + '"])' ).val( '0' );
$this.toggleClass( 'team-selected', true );
$this.siblings( '.' + team ).toggleClass( 'team-selected', true );
$this.siblings( ':not(.' + team + ')' ).toggleClass( 'team-selected', false );
} );
value = jQuery( 'input', this ).val();
}
selector = ( index === 0 ) ? '.home' : '.away';
if ( value === '1' ) {
$this.siblings( selector ).toggleClass( 'team-selected', true );
}
$this.hide();
} );
} );
jQuery( '.matchinfo.input.new-layout' ).show();
} );
