Hola a todos,
como veréis a continuación no soy muy experto en JS.
Estoy intentando hacer un sistema de votación de esos de "pincha una estrellita", pero hay que pinchar una estrella en un par de campos y luego dar a enviar. Porque quiero que evalúen determinadas características de la página (diseño, contenido).
Para ello hago lo siguiente, cuando el usuario despliega el DIV de votación hago aparecer un par de medidores de estrellas y uno de comentarios con este código
Código:
var to_show = 'MSG:';
to_show += '<fieldset class="rate_widget" title="Diseño"><legend>Diseño</legend>';
to_show += '<div id=r_"'+vote+'" class="div">';
to_show += '<div id="speed_'+vote+'" name="speed_'+vote+'" class="star_1 ratings_stars" value="1" </div>';
to_show += '<div id="speed_'+vote+'" name="speed_'+vote+'" class="star_2 ratings_stars" value="2" </div>';
to_show += '<div id="speed_'+vote+'" name="speed_'+vote+'" class="star_3 ratings_stars" value="3" </div>';
to_show += '<div id="speed_'+vote+'" name="speed_'+vote+'" class="star_4 ratings_stars" value="4" </div>';
to_show += '<div id="speed_'+vote+'" name="speed_'+vote+'" class="star_5 ratings_stars" value="5" </div>';
to_show += '</div></fieldset><div id="sr_'+vote+'"></div><br />';
to_show += '<div id=c_"'+vote+'" class="rate_widget">';
to_show += '<div id="com_'+vote+'" name="com_'+vote+'" class="star_1 ratings_stars" value="1"></div>';
to_show += '<div id="com_'+vote+'" name="com_'+vote+'" class="star_2 ratings_stars" value="2"></div>';
to_show += '<div id="com_'+vote+'" name="com_'+vote+'" class="star_3 ratings_stars" value="3"></div>';
to_show += '<div id="com_'+vote+'" name="com_'+vote+'" class="star_4 ratings_stars" value="4"></div>';
to_show += '<div id="com_'+vote+'" name="com_'+vote+'" class="star_5 ratings_stars" value="5"></div>';
to_show += '</div><div id="cr_'+vote+'"></div><br />';
to_show += '<div id=t_"'+vote+'" class="rate_widget">';
to_show += '<input type="text" name="text_'+vote+'" id="text_'+vote+'"/>';
to_show += '</div><br />';
document.getElementById('vote_'+vote).innerHTML = to_show;
e inmediatamente después le pongo las funciones que hacen que cambien las estrellas de color al pasar el ratón (está dentro de la misma función que crea las estrellas, lo pongo por separado para mayor claridad
Código:
$('.ratings_stars').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
$(this).nextAll().removeClass('ratings_vote');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
}
);
// This actually records the vote
$('.ratings_stars').bind('click', function() {
$(this).prevAll().andSelf().addClass('ratings_vote');
document.getElementById('sr_'+vote).innerHTML = '<input type="hidden" id="sv_'+vote+'" value="'+!!!!!!!!!!!!!!!!!!!+'"/>';
y donde veis "!!!!!!!!!!!!!!!!!!!" necesitaría poner el número, id o algo que me indique la estrella en la que el usuario ha pinchado.
Para hacerlo me he basado en este manual
http://www.programacion.com/articulo..._estrellas_464
Por supuesto, también acepto otras sugerencias para mejorar/optimizar este código.