31 - Llamadas encadenadas de métodos del objeto jQuery.


Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>

<body>
  <h1>Signos del horóscopo.</h1>
  <div id="menu">
    <p><a id="enlace1" href="pagina1.php?cod=1">Aries</a></p>
    <p><a id="enlace2" href="pagina1.php?cod=2">Tauro</a></p>
    <p><a id="enlace3" href="pagina1.php?cod=3">Geminis</a></p>
    <p><a id="enlace4" href="pagina1.php?cod=4">Cancer</a></p>
    <p><a id="enlace5" href="pagina1.php?cod=5">Leo</a></p>
    <p><a id="enlace6" href="pagina1.php?cod=6">Virgo</a></p>
    <p><a id="enlace7" href="pagina1.php?cod=7">Libra</a></p>
    <p><a id="enlace8" href="pagina1.php?cod=8">Escorpio</a></p>
    <p><a id="enlace9" href="pagina1.php?cod=9">Sagitario</a></p>
    <p><a id="enlace10" href="pagina1.php?cod=10">Capricornio</a></p>
    <p><a id="enlace11" href="pagina1.php?cod=11">Acuario</a></p>
    <p><a id="enlace12" href="pagina1.php?cod=12">Piscis</a></p>
  </div>
  <div id="detalles">Seleccione su signo.</div>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>
</body>

</html>
$(document).ready(function () {
  $("#menu a").click(function () {
    $("#detalles").load($(this).attr("href")); 
    return false;
  })
})
<?php
header('Content-Type: text/html; charset=UTF-8');
if ($_REQUEST['cod']==1)
  echo "<strong>Aries:</strong> Hoy los cambios serán físicos, 
  personales, de carácter, Te sentirás impulsivo y tomarás 
  iniciativas. Período en donde considerarás unirte a agrupaciones 
  de beneficencia, o de ayuda a los demás.";
if ($_REQUEST['cod']==2)
  echo "<strong>Tauro:</strong> Hoy los cambios serán privados, 
  íntimos. Recuerdos. Ayuda, solidaridad. Asuntos en lugares de retiro. Tu 
  cónyuge puede aportar buen status a tu vida o apoyo a tu profesión.";
if ($_REQUEST['cod']==3)
  echo "<strong>Géminis:</strong> Los asuntos de hoy tienen 
  que ver con las amistades, reuniones, actividades con ellos. Día esperanzado, 
  ilusiones. Mucha energía sexual y fuerza emocional. Deseos difíciles 
  de controlar.";
if ($_REQUEST['cod']==4)
  echo "<strong>Cancer:</strong> Este día la profesión 
  y las relaciones con superiores y con tu madre serán de importancia. Actividad 
  en relación a estos temas. Momentos positivos con compañeros de 
  trabajo. Actividad laboral agradable.";
if ($_REQUEST['cod']==5)
  echo "<strong>Leo:</strong> Este día los estudios, los 
  viajes, el extranjero y la espiritualidad serán lo importante. Pensamientos, 
  religión y filosofía también. Vivencias kármicas de 
  la época te vuelven responsable tomando decisiones.";
if ($_REQUEST['cod']==6)
  echo "<strong>Virgo:</strong> Para este día toma importancia 
  tu vida sexual, tal vez miedos, temas legales, juicios o herencias. Experiencias 
  extrañas. Hay karma de prueba durante este período en tu parte psicológica, 
  generándose algunos replanteos.";
if ($_REQUEST['cod']==7)
  echo "<strong>Libra:</strong> Hoy todo asunto tiene que ver con 
  tu pareja, también con socios, con la gente o el público. Ellos 
  serán lo más importante del día. Ganancias a través 
  de especulaciones o del juego. Actividades vocacionales artísticas.";
if ($_REQUEST['cod']==8)
  echo "<strong>Escorpio:</strong> Hoy todo asunto tiene que ver 
  con temas de trabajo y de salud. Presta atención a ambos. Experiencias 
  diversas con compañeros. Durante este período tendrás muchos 
  recursos para ganar dinero.";
if ($_REQUEST['cod']==9)
  echo "<strong>Sagitario:</strong> Durante este día se 
  vivirán cambios en relación a los noviazgos o a los hijos. Creatividad, 
  actividad, diversiones y salidas. Período de encuentros con personas o 
  situaciones que te impresionan.";
if ($_REQUEST['cod']==10)
  echo "<strong>Capricornio:</strong> Los cambios del día 
  tienen que ver con tu hogar, con la convivencia y con el padre. Asuntos relativos 
  al carácter en la convivencia. El karma de responsabilidad de estos momentos 
  te acercará al mundo de lo desconocido, mucha madurez y contacto con el 
  más allá.";
if ($_REQUEST['cod']==11)
  echo "<strong>Acuario:</strong> Hoy todo asunto tiene que ver 
  con el entorno inmediato, hermanos y vecinos, con la comunicación, los 
  viajes cortos o traslados frecuentes. El hablar y trasladarse será importante 
  hoy. Mentalidad e ideas activas.";
if ($_REQUEST['cod']==12)
  echo "<strong>Piscis:</strong> Durante este día se vivirán 
  cambios en la economía, movimientos en los ingresos, negocios, valores. 
  Momentos de gran fuerza y decisión profesionales, buscarás el liderazgo.";
?>
#menu {
  font-family: Arial;
  margin:5px;
}

#menu p {
  margin:0px;
  padding:0px;
}

#menu a {
  display: block;
  padding: 3px;
  width: 160px;
  background-color: #f7f8e8;
  border-bottom: 1px solid #eee;
  text-align:center;
}

#menu a:link, #menu a:visited {
  color: #f00;
  text-decoration: none;
}

#menu a:hover {
  background-color: #369;
  color: #fff;
}

#detalles {
  background-color:#ffc;
  text-align:left;
  font-family:verdana;
  border-width:0;
  padding:5px;
  border: 1px dotted #fa0;
  margin:5px;
}

Confeccionar un problema que muestre una lista de hipervínculos con los distintos signos del horóscopo y luego al ser presionado no recargue la página completa sino que se envíe una petición al servidor y el mismo retorne la información de dicho signo, luego se actualice solo el contenido de un div del archivo HTML


Ver solución

pagina1.html





funciones.js




pagina1.php




estilos.css



Retornar