0

Estoy creando un grid que permita seleccionar x cantidad de botones con numeros, y cuando el usuario le de click al boton muestre el numero que este representa, muestro el codigo.

$(document).ready(()=>{
	$('#item1').click(()=>{//Quisiera implementar esto en cada uno de los 
                         //botones, solo este funciona.
		$('#item1').toggleClass('active')
		$('#item1').toggleClass('disabled')	
	})
$('.item').click(()=>{
	$(this).toggleClass('active')
    $(this).toggleClass('disabled')	//Los toggleClass tampoco se ejecutan al darle click	
	let valor= $(this).attr('value')
	console.log(valor) //retorna undefined
	
})


});
<?php 
echo "
<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='UTF-8'>
	<title>Testing</title>
	<link rel='stylesheet' href='css/main.css'>
	<!-- <script src='js/jquery.plugin.min.js'></script>	 -->
	<script src='js/jquery.min.js'></script>
	<script src='js/main.js'></script>
  <script         src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">   </script>  
</head>
<body>


	<div id='grid'>
		<table>
			";
			echo "<tr>";
				for ($i=1; $i <=500; $i++) { 
				echo "
				<td class='item active' id='item".$i."'>".str_pad($i, 3, "0", STR_PAD_LEFT)."</td>	
				";
				if ($i%10==0 || $i==0)  {
			echo "</tr><tr>";
			}
		}
		echo "	
	</table>		
</div>

</body>
</html>

";

?>

Sucede que tengo que agregar esta funcion a cada uno de los botones, pero no me parece una solucion correcta, crear un codigo para cada boton. Soy nuevo programando y es una de mis primera tareas como programador, alguna idea de como puedo resolver esto?

1 respuesta 1

1

Espero lo siguiente sirva:

  $(document).ready(()=>{
        $('.clase_boton').click(()=>{
          //a cada botnton con la clase "clase_boton" se el asigan el evento click, y lo que esté aquí a dentro se va a hacer solo para el botón al cual usted le dio click
            $(this).toggleClass('active');
            $(this).toggleClass('disabled');
            let numero_boton=$(this).attr('value'); //así saca el número del botón que debe estar en el atributo "value del botón"
        })


    });
5
  • Excelente idea, sin embargo si hago un console.log de numero_boton, me muestra "undefined" el 12 ene. 2018 a las 22:52
  • Porque seguramente su botón no tiene el atributo "value" el 12 ene. 2018 a las 22:53
  • De hecho si, lo hice tal como indicaste y le agregue el atributo value a cada item, e igual retorna undefined, de igual manera si pido el atributo id ($(this).attr('id')) tambien me retorna undefined... el 12 ene. 2018 a las 23:01
  • el html debería está de esta forma <td><button class="clase_boton" value="21">botón</button></td> el 12 ene. 2018 a las 23:07
  • Lo acabo de actualizar a como lo tengo... Como te dije me retorna undefined, no tengo idea de que la razon... Tambien retorna indefined si $(this).attr('id') el 12 ene. 2018 a las 23:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.