conseguir

[ersito]

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.

[caricatos]

Hola:

Tienes un grave error por repetir el mismo id en distintos sitios.
Te cuento más o menos como tengo mi sistema de valoraciones que puedes ver aquí: Este diario: Valorar contenido. En vez de usar campos raros, vuelco la valoración a un select, que en el caso de que te visiten sin javascript (todos podemos desactivarlo) se realiza esa valoración solo con el select, pero podemos pinchar en cualquier estrella y modificará ese select... y por el asunto de la accesibilidad, el formulario va a la página que lo gestiona, pero con javascript lo cancelamos para que realmente sea Ajax quien lo procese.

Por cierto, veo que tu código usa una librería... si quieres hacerlo así, danos un aviso para mover el tema.

Saludos