Aumentar altura de capa jQuery

Miguel_Mendez · #1 (**permalink**) 23/02/2010, 15:00

Hola Necesito ayuda con las siguientes lineas

Código HTML:

    $(document).ready(function(){
    
    for (var i = 0; i < <?php echo $pocimas_roja ?>; i++) {
      $('<div class="pocima_roja" title="Utilizar pocima">').appendTo(document.body);
    }
    $("div.pocima_roja").click(function () {
		$("#c_red").animate({ 
        height: "35%",}, 1500 );
      $(this).hide(500, function () {
        $(this).remove();
      });
    });
    for (var i = 0; i < <?php echo $pocimas_azul?>; i++) {
      $('<div class="pocima_azul" title="Utilizar pocima">').appendTo(document.body);
    }
    $("div.pocima_azul").click(function () {
		$("#c_blue").animate({ 
        height: "35%",}, 1500 );
      $(this).hide(500, function () {
        $(this).remove();
      });
    });

  });

<div id="apDiv1"><img src="img/backgrounds/footer_menu.png" width="770" height="155" style="position:absolute; z-index:4" />
  <div id="c_red" style="height:20px"></div>
  <div id="c_blue" style="height:20%"></div>
</div>

Lo que tengo es unos botones que aumentan el tamaño de una capa en pixeles el codigo funciona pero por ejemplo si tengo dos o mas botones rojos no aumenta la capa, mas que una sola vez.

Lo que necesito es que si aparecen 5 botones rojos quisiera que la capa #c_red aumente 2% por cada clic.

espero su ayuda

gracias.

mayid · #2 (**permalink**) 23/02/2010, 17:38

Aca lo que tenes es una inserción de varios div.pocima_roja en el DOM, tras la carga de la pagina.

Cita:

for (var i = 0; i < <?php echo $pocimas_roja ?>; i++) {
$('<div class="pocima_roja" title="Utilizar pocima">').appendTo(document.body);
}
$("div.pocima_roja").click(function () {
$("#c_red").animate({
height: "35%",}, 1500 );
$(this).hide(500, function () {
$(this).remove();
});
});

El método que usas no está mal, pero usa recursos innecesariamente, porque podrías escribir el html directamente en el body con PHP, sin necesidad de utilizar jquery.

En cuanto a la función, pensá que tenés varios divs, y que entonces este selector te devolverá un array, y no un solo elemento:

$("div.pocima_roja")

Entonces, para asignar la funcionalidad "click" necesitas usar un bucle each.

Miguel_Mendez · #3 (**permalink**) 24/02/2010, 11:20

Agradesco tu respuesta.

El codigo me quedo algo asi pero creo que no comprendi bien eso de hacer el
bucle each.

.

Código HTML:

 <script>
$(document).ready(function(){
    
    $("div.pocima_roja").one('click', function () {
     $(this).hide(500, function () {
        $(this).remove();
      });
    });
	
	 $("div.pocima_roja").click(function () {
		$("#c_red").animate({ 
        height: "35px",}, 1500 );
		      });

    $("div.pocima_azul").one('click', function () {
     $(this).hide(500, function () {
        $(this).remove();
      });
    });
	
	 $("div.pocima_azul").click(function () {
		$("#c_blue").animate({ 
        height: "35px",}, 1500 );
		      });

});
  </script>
</head>
<body>
  <div class="pocima_roja"></div>
  <div class="pocima_roja"></div>
  <div class="pocima_azul"></div>
  <div class="pocima_roja"></div>
  <div class="pocima_roja"></div>
  <div class="pocima_roja"></div>
  <div class="pocima_azul"></div>

<div id="apDiv1">
<div id="dats" style="position: absolute; color:white; z-index:5; text-align:center; width:5%; margin:40px 0 0 390px; border:1px solid silver;"><a href="#">▲</a></div>
<img src="img/backgrounds/footer_menu.png" width="770" height="155" style="position:absolute; z-index:4" />
  <div id="c_red" style="height:20px"></div>
  <div id="c_blue" style="height:20%"></div>
  
</div>

mayid · #4 (**permalink**) 24/02/2010, 14:47

Bueno, desconozco el uso de one(), pero en lo que se refiere a un bucle each... no tenes alguna experiencia previa? Tomando tu codigo original, sería así:

Cita:

pocimas_rojas = $("div.pocima_roja"); // esto es un array siempre y cuando haya más de un div.pocima_roja .

$.each(pocimas_rojas, function() {

$(this).click(function () {

$("#c_red").animate({ height: "35%",}, 1500 );
$(this).hide(500, function () { $(this).remove(); });

});

});

http://api.jquery.com/jQuery.each/

Se puede pulir, pero la logica es que a cada div.pocima_roja se le adjudica la función onclick. Lo importante es que entiendas la lógica del bucle.

Lo probas?

Si funciona, lo que falta es una comprobación para saber si se trata de un array o no, porque si solo tuvieses un div... entonces el each no funcionaría.