Como se puede mejorar esto? (JQuery)

augusto_jaramil · #1 (**permalink**) 27/01/2012, 10:48

Buenas a tod@as,

tengo este codigo:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Prueba TABS</title>
     		<script language="javascript" type="text/javascript" src="js/jquery.js"></script>

<script>

		$().ready(function () {
			$(":button").click(function () {
				elegido = $(this).val();
				cuantos = $(":button");
				$(cuantos).each(function () {
					if ($(this).val() != elegido) {
						$(this).removeClass("current");
						$(this).addClass("noseleccionado");
					}
					else {
						$(this).removeClass("noseleccionado");
						$(this).addClass("current");
					}
				})
			})
		})
</script>




<style>
.current {
    border-radius: 12px;
    border: 1px solid #CED5D7;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-bottom-left: 0px;
    -webkit-border-bottom-right: 0px;
    background-color: #48f;
    background-position: 0 -60px;
    color: #fff;
    font-weight: bold;
    height: 2em;
    background-position: 100% -60px;
}
.noseleccionado {
    border-radius: 12px;
    -moz-border-radius-bottomRight: 0px;
    -moz-border-radius-bottomLeft: 0px;
    -webkit-border-bottom-left: 0px;
    -webkit-border-bottom-right: 0px;
    border: 1px solid #CED5D7;
    background: #bdf url(gif/tabs.gif);
    color: #008;
    display: block;
    float: left;
    height: 2em;
    padding-left: 10px;
    text-decoration: none;
}
input:hover {
    background-color: #33aaff;
    background-position: 0 -120px;
}
</style>
</head>
<body>
<div>
<table cellspacing="0" cellpadding="0" id="tabs">
<td><input type="button" id="b1" name="b1" class="current" value="Prueba"></td>
<td><input type="button" id="b2" name="b2" class="noseleccionado" value="No Seleccionado"></td>
</table>
</div
</body>
</html>

La idea es esta:

Son dos botones, al hacer click sobre uno de ellos me debe hacer cambio de la clase (de noseleccionado a current)

Así me canciona, pero acá se recorre todos los type button para hacer cambio de clase.

La cosa es que no sé como determinar cuál es el botón que tiene la clase current pa cambiarlo a la clase noselecionado y en el que se hizo el click cambiarlo de clase noseleccionado a la clase current

Será que me expliqué bien?

Un Cordial Saludo

maycolalvarez · #2 (**permalink**) 27/01/2012, 11:33

añade otra clase común para ambos

Aijoona · #3 (**permalink**) 27/01/2012, 13:56

Dejando de lado las globales implicitas, tener tanto anidamiento es criminal.

augusto_jaramil · #4 (**permalink**) 28/01/2012, 15:46

Oime aijoona,

precisamente eso es lo que busco, hacer más optima la vaina....