Alternar innerHTML

Question

He visto varios ejemplos que se acercan a lo que estoy buscando, pero ninguno parece describirlo exactamente como lo quiero. Soy un principiante de jQuery, así que las explicaciones son bienvenidas.

Estoy buscando esto para alternar innerHTML de - a +. Alguien sabe de una manera de hacer esto, de manera eficiente?

jQuery/JavaScript

$(document).ready(function() { 
      $(".A1").click(function() { 
       $(".P1").toggle("slow"); 
       $(".A1").html("+"); 
      }); 
     }); 

HTML

<div class="A1">-</div> 
<h2 class="H1">Stuff</h2> 
<div class="P1"> 
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff 
</div> 

Gracias, todo lo relacionado con el cambio del texto dentro de un elemento HTML debe ayudar. =)

Answer 1

¿Qué le parece agregar una clase que le permita conocer el estado expandido/colapsado?

HTML

<div class="A1 expanded">-</div> 
<h2 class="H1">Stuff</h2> 
<div class="P1"> 
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff 
</div> 

JavaScript:

$(document).ready(function() { 
    $(".A1").click(function() { 
     var $this = $(this); 
     $(".P1").toggle("slow") 

     $this.toggleClass("expanded"); 

     if ($this.hasClass("expanded")) { 
      $this.html("-"); 
     } else { 
      $this.html("+"); 
     } 
    }); 
}); 

Ejemplo:http://jsfiddle.net/sGxx4/

Answer 2

$(document).ready(function() { 
    $(".A1").click(function() { 
     $(".P1").toggle("slow"); 
     $(".A1").html(($(".A1").html() === "+" ? $(".A1").html("-") : $(".A1").html("+"))); 
    }); 
}); 

Un poco de explicación: Soy la creación $("#A1").html() con el producto del operador terciario, utilizarlo para comprobar el valor actual de texto #A1 's. Si es un +, configuro el texto del elemento en -, de lo contrario, lo configuro en +.

Sin embargo, usted dijo "eficientemente". Para ello, es importante tener en cuenta que si va a usar un selector dos o más veces en la misma función, debe almacenar el objeto jQuery que resulta del selector que le da en una variable, por lo que no tiene que vuelva a ejecutar el selector cada vez. Aquí está el código con esa modificación:

$(document).ready(function() { 
    $(".A1").click(function() { 
     var $A1 = $(".A1"); 
     $(".P1").toggle("slow"); 
     $A1.html(($A1.html() === "+" ? $A1.html("-") : $A1.html("+"))); 
    }); 
}); 

Answer 3

No hay manera de cambiar el contenido. Puede verificar si $ ('. P1') es visible, y luego cambiar el +/- div de acuerdo con eso.

Algo así como:

$(document).ready(function() { 
    $(".A1").click(function() { 
    $(".P1").toggle("slow", function(){ 
     if($(this).is(':visible')) 
      $(".A1").html("-") 
     else 
      $(".A1").html("+") 
    }); 
    }); 
}); 

Utilizando una función de devolución de llamada (el segundo argumento del método .toggle()) para hacer el registro de entrada se garantiza que se esté examinando después de la animación se ha completado.

jsFiddle: http://jsfiddle.net/cy8uX/

Answer 4

más versión más corta

$(document).ready(function() { 
    $(".A1").click(function() { 
     var $self = $(this); 
     $(".P1").toggle("slow", function () { 
      $self.html($self.html() == "-" ? "+" : "-"); 
     }); 
    }) 
}); 

Answer 5

Aquí está una manera que utiliza los nombres de clase en un padre y CSS reglas y no tiene que cambiar el contenido HTML y trabaja fuera de un contenedor y clases por lo que podría tener múltiples las de éstos en la misma página con sólo este pedazo de código:

HTML:

<div class="container expanded"> 
    <div class="A1"> 
     <span class="minus">-</span> 
     <span class="plus">+</span> 
    </div> 
    <h2 class="H1">Stuff</h2> 
    <div class="P1"> 
    Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff 
    </div> 
</div>​ 

CSS:

.expanded .plus {display:none;} 
.collapsed .minus {display: none;} 

Javascript:

$(document).ready(function() { 
    $(".A1").click(function() { 
     $(this).closest(".container") 
      .toggleClass("expanded collapsed") 
      .find(".P1").slideToggle("slow"); 
    }); 
}); 

trabajo de demostración:. http://jsfiddle.net/jfriend00/MSV4U/