Controlar varios botones con misma funcion - JQUERY

[EspecimenAs]

Como vereis en el codigo tengo una tabla con varias fila que contienen el mismo contenido, lo que quiero controlar es, que si pulso el boton cobrar de la primera fila me muestre el <div class="cobrado"> de ese fila y no en todas, llevo un rato liado pero no lo consigo, necesito algun consejo o idea de como comenzar, me seria de gran ayuda gracias :).

Código HTML:

<tr>
	<td>9:00</td>
	<td>
		<div id="nombreCliente1">XXX</div>
		<div class="botonera">
			<a class="boton azul anadir img-der bordes" href="#">Cita </a>
			<a class="boton azul pagar img-der bordes" href="#">Cobrar </a>
		</div>
		<div class="cobrado bordes"><p>Pagado</p></div>
	</td>
</tr>
<tr>
	<td>9:30</td>
	<td>
		<div id="nombreCliente2">XXX</div>
		<div class="botonera">
			<a class="boton azul anadir img-der bordes" href="#">Cita </a>
			<a class="boton azul pagar img-der bordes" href="#">Cobrar </a>
		</div>
		<div class="cobrado bordes"><p>Pagado</p></div>
	</td>
</tr> 

[sneyder05]

Saludos EspecimenAs

Podrías hacer un selector por clase para los botones Cobrar, y luego mostrar el div.cobrado de esa tabla, prueba con esto:

Código PHP:

  $('a.pagar').live('click', function(){
    $(this).parent().siblings('div.cobrado').show();
}); 
   

Cualquier duda, pregunta

[EspecimenAs]

Grandisimo sneyder05 muchisimas gracias me a servido con esto:

Código PHP:

  $('a.pagar').live('click', function(){
        $(this).parent().siblings('div.cobrado').css({visibility: 'visible'});
    }); 
   

Necesito que me expliques ese par de lineas si puedes :P.

Ahora tengo otro problema mas complicado por que no puedo resolverlo con esas linea de codigo, ademas que mis conociminetos jquery no son tan avanzados :p.

Pulsando el boton Cita me aparece un Div de forma modal con un imput:

Código HTML:

<div id="modal">
	<div class="formCabecera">
		Introduza nombre del cliente
	</div>
		<div class="formContenido">
			<form id="formulario" method="POST" action="#">
				<p>
					<label>Nombre</label><input id="campoNombreCliente" type="text"></input>
				</p>
			</form>
			<a href="#" class="botonForm verde close"><img src="aceptar.png">Aceptar</a>
			<a href="#" class="botonForm rojo close"><img src="salir.png">Salir</a>
		</div>
	</div> 

Lo que quiero conseguir es lo mismo que antes. al pulsar Cita de su correspodiente fila, al introducir el nombre en el imput del formulario modal me lo 'pinte' en el div nombreCliente correspondiente y no en todos :P.
Tengo algo asin:

Código PHP:

         $('a.verde').live('click', function(){
        var texto = $('#campoNombreCliente').val();
        $('.nombreCliente').html(texto);
    });
 
 
    $(document).ready(function() {
        $('.anadir').click(function(e) {
            $("#campoNombreCliente").attr('value', ' ');
            $('#modal').reveal({
                animation: 'fade',
                animationspeed: 600,
                closeonbackgroundclick: true,
                dismissmodalclass: 'close'
 
            });
            return false;
        });
    }); 
   

[sneyder05]

Saludos EspecimenAs

Ese par de líneas son muy simples,lo que sucede es lo siguiente, cuando creas controles directamente desde JS se debe usar la función live para indicar el evento que se desea registrar, en este caso click; ya dentro de la ejecución de evento click, $(this) hace referencia al elemento <a/> que disparó el click, ya con eso indicas con la función parent que deseas obtener el padre de ese control, que en tu caso sería div.botonera, con ese objeto en el cursor aplicas la función siblings con la expresión div.cobrado que te retona los elementos div vecinos del selector o cursor que tengas(en esta parte tendrías en el cursor, el div.botonera), filtrando que tengan la clase .cobrado, y finalmente ya con el div que deseas en el cursor aplicaste el CSS correspondiente para mostrarlo.

Espero me hayas entendido.

Ahora para la 2da inquietud creo que podría hacerlo de 2 formas, pero hay 1 de ellas que es bastante compleja en cuanto a conceptos, y que por lo que me decis no tienes la experiencia necesaria para llevarlo a cabo.

Pero bueno, nada que no podamos intentar arreglar con un par de flags, siendo así, prueba con este código:

Código PHP:

  $('a.anadir').live('click', function(){        
        $('td.temp_row_selected').removeClass('temp_row_selected');
        $(this).parent().parent().addClass('temp_row_selected').children('div[id^="nombreCliente"]').empty();
        
        $('#modal').reveal({ 
            animation: 'fade', 
            animationspeed: 600, 
            closeonbackgroundclick: true, 
            dismissmodalclass: 'close' 
 
        }); 
        return false; 
    });
    
    $('a.verde').live('click', function(){ 
        var texto = $('#campoNombreCliente').val(); 
        $('td.temp_row_selected > div[id^="nombreCliente"]').html(texto);
        $('td.temp_row_selected').removeClass('temp_row_selected');
    }); 
   

Pruébalo y me cuentas cualquier duda.

[EspecimenAs]

Gracias lo he entendido perfecto, me has ayudado mucho ademas de darme ideas de como tratar con problemas parecidos, gracias.

sobre el codigo lo unico que no entiendo es esta linea 'div[id^="nombreCliente"]' por ese ^ aunque parece un filtro...

Por cierto tambien hice el codigo por mi cuenta antes de que pusieras el tuyo te lo muestro por si ves algun fallo:

Código PHP:

  $(document).ready(function() {
        $('.anadir').click(function(e) {
            $("#campoNombreCliente").attr('value', ' ');
            $('#modal').reveal({
                animation: 'fade',
                animationspeed: 600,
                closeonbackgroundclick: true,
                dismissmodalclass: 'close'
 
            });
 
            var elParent = $(this).parent("div").attr("id");
            $('a.verde').click(function(){
                var texto = $('#campoNombreCliente').val();
                $('#'+elParent+1).html(texto);
                elParent = ' ';
            })
        });
    }); 
   

Tiene un par de cambio le añadi un id=x a botonera y x+1 a nombreCliente, aunque utilizare tu codigo por la ayuda :), gracias de nuevo.

PD: por cierto el .empty ese no me sirve ya que lo que quiero es vaciar el input, para mostarlo vacio la proxima vez, no el div nombreCliente.

[sneyder05]

Saludos EspecimenAs

El selector ^ se usa dentro de un filtro por atributo, he indica que dicho atributo inicie con la cadena que se pasa como parámetro, en tuc caso, que el div inicie con "nombreCliente"