JavaScript - Ocultar Tabla Si La Fecha Actual A Pasado La Fecha Asignada.

 
Vista:
sin imagen de perfil

Ocultar Tabla Si La Fecha Actual A Pasado La Fecha Asignada.

Publicado por Luis (24 intervenciones) el 28/01/2017 17:51:24
Buenas, Lo Que Quiero Es Que Las Tablas Se Eliminen U Oculten Si Su fecha A Caducado, Lo Que quiero Es Que sea Una Sola Funcion Para todas Las Tablas. :)


HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<body onload="OcultarPorFecha()">
 
<!-- Objetivo: Se Agregan Los Partidos Por Liga, Los Que Más Se Puedan. Segundo: dependiendo De la Fecha En La Que Jueguen Así Mismo Se Mostrara, Si El Usuario Quiere Ver Los Partidos De La Liga Sea Cual Sea, Solo Mirará Los De la Semana Actual, Sin Importar Que En El Código Madre esten Todas Las Fechas. Tercero: En Días Se Mostrara Los Partidos De Hoy, ya Que El
Código Hara Una Pregunta.- Quien juega Hoy D/M/A ? Y Los Partidos Que Esten dentro De Este Parametro De semana Se Mostraran. Cuarto: Cuando El partido Llegue A Su Momento De Inicio, Este Se Eliminara De El Cuadro De Apuestas. Y Se Pasara A Un En Vivo, Aunque Esta Opcion Aún No La Tengo Muy Clara. -->
 
<!--  MANOS A LA OBRA Y QUE DIOS ME AYUDE. ESTA SERA LA MEJOR PÁGINA WEB DE APUESTAS DEL MUNDO. -->
 
<div id="Liga-Española" class="Liga-Española-Primera-Division">
    <div id="Titulo-De-Cada-Liga">
      <h1>Liga Española (Primera División)</h1>
    </div>
    <div id="Subtitulo-De-Cada-Liga">
     <span> Resulatdo 1 x 2</span>
    </div>
    <div id="Cuerpo-De-cada-Liga">
     <table id="first">
     <tbody>
     <tr>
     <td class="date-team">
 
           15 De Febrero 2017 a Las 17:30 <input type="hidden" name="fechahorainicio" id="fecha_1" value="26-01-2017 03:34" />
      </td>
 
	  <td class="mb-option-button"  title="">
       			<button type="submit" class="button">
					<div class="name-team-option">Deportiva La Coruña</div>
					<div class="name-value-option">3.60</div>
				</button>
       </td>
     </tr>
     </tbody>
     </table>
 
      <table id="second">
     <tbody>
     <tr>
     <td class="date-team">
           2  De Febrero 2017 a Las 12:30 <input type="hidden" name="fechahorainicio" id="fecha_2" value="26-01-2017 12:33" />
      </td>
 
	  <td class="mb-option-button"  title="">
       			<button type="submit" class="button">
					<div class="name-team-option">Brasil</div>
					<div class="name-value-option">3.60</div>
				</button>
       </td>
     </tr>
     </tbody>
     </table>
 
      <table id="third">
     <tbody>
     <tr>
     <td class="date-team">
            26 De Enero 2017 a las 20:45<input type="hidden" name="fechahorainicio" id="fecha_3" value="29-01-2017 20:45"></input>
      </td>
    	  <td class="mb-option-button"  title="">
       		<button type="submit" class="button">
			<div class="name-team-option">Barcelona</div>
			<div class="name-value-option">3.60</div>
		</button>
       </td>
       </tr>
     </tbody>
     </table>
    </div>
</div>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
 
  function OcultarPorFecha (){
 
   var fechaActual = new Date ();
 
	 var fechaInicioPartido;
	 for (ix=1;document.getElementById("fecha_" + ix);ix ++){
	 fechaInicioPartido = construyeFecha(document.getElementById("fecha_" + ix ).value);
 
	   if (fechaActual > fechaInicioPartido){
		  document.getElementById("first").style.display = "none";
	   }
 
  }
  }
	function construyeFecha(stringfecha){
	  var dia  = parseInt(stringfecha.substring(0,2));
          var mes = parseInt(stringfecha.substring(3,5)) - 1;
          var anio  = parseInt(stringfecha.substring(6,10));
          var hora = parseInt(stringfecha.substring(11,13));
          var minuto = parseInt(stringfecha.substring(14,16));
          return new Date(anio, mes, dia, hora, minuto);
	}
 
</script>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro
Val: 477
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ocultar Tabla Si La Fecha Actual A Pasado La Fecha Asignada.

Publicado por Alejandro (130 intervenciones) el 28/01/2017 23:46:30
Hola Luis, no estoy seguro si es lo que buscas hacer, pero tengo una pregunta los datos de los partidos y toda la info viene desde una Base de Datos? porque de ser así este tipo de consulta la puedes aplicar en esta directamente y después generar las tablas, esto te permite ser más dinámico. Ya que la forma actual esta forma, si solo muestras los partidos en fecha, las tablas que estén ocultas estaran ahi innecesariamente.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Ocultar Tabla Si La Fecha Actual A Pasado La Fecha Asignada.

Publicado por Luis Sabi (24 intervenciones) el 29/01/2017 04:19:55
Buenas Noches Amigo, No, Como Tal No Tengo Una Base De Datos, Lo Que Quiero Es Que Al Llegar A La Fecha Actual Esta Tabla Se Elimine, Como Son Muchas Tablas, Lo Que No Quiero Es Tener Que generar Un Codigo JavaScript Para Cada Tabla. Muchas Gracias Y Disculpe Si No Me He sabido Expresar,
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 477
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ocultar Tabla Si La Fecha Actual A Pasado La Fecha Asignada.

Publicado por Alejandro (130 intervenciones) el 30/01/2017 00:46:10
Hola Luis, ahora si creo que te entendi. Mira hice algunas modificaciones a tu código:

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="UTF-8">
		<title>Javascript</title>
	</head>
	<body>
 
		<div id="liga-espanola" class="liga-espanola-primera-division">
 
			<div class="titulo">
				<h1>Liga Española (Primera División)</h1>
			</div>
 
			<div class="subtitulo">
				<span> Resulatdo 1 x 2</span>
			</div>
 
			<div class="cuerpo-liga">
 
				<!-- 					
					Cada una de las filas TR, es un partido. Cada una tiene la clase data-team y el atributo data-date
					que tiene como valor la fecha y hora del partido. 
					Este ultimo es utilizado por la funcion OcultarPorFecha (ver archivo ocultar_apuestas.js) para comparar 
					si la apuesta a el partido aun esta permitida.
				 -->
 
				<table>
					<tbody>
 
 
						<tr class="date-team" data-date="29-01-2017 03:34">
							<td>15 De Febrero 2017 a Las 17:30 </td>
							<td class="mb-option-button">
								<button type="submit" class="button">
									Deportiva La Coruña
									3.60
								</button>
							</td>
						</tr>
 
						<tr class="date-team" data-date="29-01-2017 23:34">
							<td>15 De Febrero 2017 a Las 17:30 </td>
							<td class="mb-option-button">
								<button type="submit" class="button">
									Barcelona
									2.60
								</button>
							</td>
						</tr>
					</tbody>
				</table>
 
			</div>
		</div>
 
		<script type="text/javascript" src="ocultar_apuestas.js"></script>
	</body>
</html>

ocultar_apuestas.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function ocultarPorFecha() {
	var fechaActual = new Date();
 
	// 2) RECUPERO TODOS LOS TR QUE TIENE LA CLASE .date-team
	var partidos = document.querySelectorAll('tr.date-team'); // => devuelve un NodeList
	partidos = Array.prototype.slice.call(partidos); // 3) Convierto el NodeList en un Array para poder recorrerlo
 
	// 4) Utilizo el metodo forEach para recorrer el array
	partidos.forEach(function(element, index) {
		var fechaInicioPartido = element.getAttribute('data-date'); // 5) obtengo la fecha del partido 
		fechaInicioPartido = construyeFecha(fechaInicioPartido); // 6) covierto la fecha con tu funcion
 
		if (fechaActual > fechaInicioPartido) {
			element.style.display = "none";
		}
	});
}
 
function construyeFecha(stringfecha) {
	var dia = parseInt(stringfecha.substring(0, 2));
	var mes = parseInt(stringfecha.substring(3, 5)) - 1;
	var anio = parseInt(stringfecha.substring(6, 10));
	var hora = parseInt(stringfecha.substring(11, 13));
	var minuto = parseInt(stringfecha.substring(14, 16));
	return new Date(anio, mes, dia, hora, minuto);
}
 
// 1) Agrego el manejador de eventos
window.addEventListener('load', ocultarPorFecha);

Algunas lineas del codigo están comentadas, ya que utilice algunos métodos de javascript que quizás puedas investigar por tu cuenta para entenderlos mejor. Otra cosa es que en el html cambie las clases por los id y que cada fila de representa un partido.

Pruebo con esto y comentanos.
Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Ocultar Tabla Si La Fecha Actual A Pasado La Fecha Asignada.

Publicado por Luis Sabi (24 intervenciones) el 30/01/2017 04:38:15
Alejandro, Muchas Gracias, Perfecto El Código Y gracias Por Los Comentarios, soy Nuevo En javaScript Pero Aprenderé Poco A Poco.
Quisiera Me Ayudara Con Algo más. Es Que H Hecho Un Código html En El Tiene Todos Los Días De La Semana, El js Obtiene El Día Actual Y Escribe Sobre El Día Actual Hoy Y Oculta El Nombre De Cuyo Día, Quisiera Resumirlo Y dejar Una Sola Function, Ay Le Muestro El Código Y De Nuevo, Muchas Gracias Por Su Ayuda.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<div id="today">
 
    <div class="content-header-center">
       <h4><a>Apuestas De Fútbol</a></h4>
    </div>
    <div class="content-general-days">
 
   <ul class="menu-content-for-all-or-days">
       <li class="div-of-days" title="Todo">
			<a href="" class=""> <span>Todo</span> </a>
		</li>
 
        <li class="div-of-days" title="Lunes" >
			<a href="" class=""> <span id="Lun">Lun</span>
              <script>
			   now = new Date
			   if(now.getDay()== 1)
			   document.write("Hoy");
			   if(now.getDay()== 1)
			   document.getElementById("Lun").style.display = "none";
			   </script>
             </a>
		</li>
        <li class="div-of-days" title="Mártes" >
			<a href="" class=""> <span id="Mar">Mar</span>
               <script>
			   now = new Date
			   if(now.getDay()== 2)
			   document.write("Hoy");
			   if(now.getDay()== 2)
			   document.getElementById("Mar").style.display = "none";
			   </script>
             </a>
		</li>
        <li class="div-of-days" title="Miércoles">
          <a href="" class=""> <span id="Mie">Mie</span>
			<script>
			   now = new Date
			   if(now.getDay()== 3)
			   document.write("Hoy");
			   if(now.getDay()== 3)
			   document.getElementById("Mie").style.display = "none";
			   </script>
			 </a>
		</li>
        <li class="div-of-days" title="Jueves" >
			<a href="" class=""> <span id="Jue">Jue</span>
              <script>
			   now = new Date
			   if(now.getDay()== 4)
			   document.write("Hoy");
			   if(now.getDay()== 4)
			   document.getElementById("Jue").style.display = "none";
			   </script>
             </a>
		</li>
        <li class="div-of-days" title="Viernes" >
			<a href="" class=""> <span id="Vie">Vie</span>
              <script>
			   now = new Date
			   if(now.getDay()== 5)
			   document.write("Hoy");
			   if(now.getDay()== 5)
			   document.getElementById("Vie").style.display = "none";
			   </script>
 
 
             </a>
		</li>
        <li class="div-of-days" title="Sábado" >
			<a href="" class=""> <span id="Sab">Sab</span>
              <script>
			   now = new Date
			   if(now.getDay()== 6)
			   document.write("Hoy");
			   if(now.getDay()== 6)
			   document.getElementById("Sab").style.display = "none";
			   </script>
 
             </a>
		</li>
        <li class="div-of-days" title="Domingo" >
			<a href="" class=""> <span id="Dom">Dom</span>
            <script>
			   now = new Date
		       if(now.getDay()== 0)
			   document.write("Hoy");
			   if(now.getDay()== 0)
			   document.getElementById("Dom").style.display = "none";
			   </script>
 
             </a>
		</li>
 
      </ul>
  </div>
</div>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 477
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ocultar Tabla Si La Fecha Actual A Pasado La Fecha Asignada.

Publicado por Alejandro (130 intervenciones) el 31/01/2017 00:57:19
Hola Luis, prueba con esto y nos comentas si te sirve. Saludos.

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>Javascript</title>
		<style type="text/css">
			* {margin: 0; padding: 0;}
			body {color: #333; font-size: 14px; overflow-x: hidden; background: #F7F7F7;}
			h4 {font-size: 1.3em;}
			/*CONTAINER*/
			.container {
				width: 100%;
			}
			/* HEADER */
			header.main-header {width: 100%; padding: 1em; background: #1287A8;}
			.main-header h4 {color: #FFF;}
 
			/*MAIN*/
			.main-content { display: block; padding: 1em; width: 80%; margin: 1em auto;}
 
			/*LIST*/
			ul.list {list-style: none;}
			.list li.list__item {width: 100%;}
			.list a.list__link {
				text-decoration: none;
				color: #FFF; 
				font-size: 1.1em;
				display: block;
				cursor: pointer;
				padding: .5em;
				background: teal;
				margin-bottom: .5em;
				border: 1px solid #004A4A;
				transition: all .3s;
			}
			.list a.list__link:hover,
			.list a.list__link.current-day {background: #004A4A;}		
 
		</style>
	</head>
	<body>
		<div class="container" id="today">
			<!-- HEADER -->
			<header class="main-header">
				<div class="content-header-center">
					<h4><a>Apuestas De Fútbol</a></h4>
				</div>
			</header>
 
			<!-- MAIN -->
			<main class="main-content">
			<div class="content-general-days">
			<ul class="menu-content-for-all-or-days list" id="menu-content"></ul>
		</div>
		</main>
	</div>
 
	<script type="text/javascript" src="current_day.js"></script>
</body>
</html>

current_day.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/**
 * createList 
 * Crea los elementos de la lista de forma dinamica.
 * 
 * @return undefined
 */
function createList() {
	var ul = document.getElementById('menu-content');
 
	var days = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'];
 
	for (var i = 0; i < 7; i++) {
		var template = "<li class='list__item'>" +
			"<a href='#' class='list__link' data-day='" + (i + 1) + "'>" + days[i] + "</a>" +
			"</li>";
 
		// Agrego cada elemento LI al UL
		ul.innerHTML += template;
	}
}
 
/**
 * selectCurrentDay 
 * Selecciona el dia actual.
 * 
 * @return undefined
 */
function selectCurrentDay() {
	var now = new Date();
	var items = Array.prototype.slice.call(document.querySelectorAll('a.list__link'));
 
	items.forEach(function(element, index) {
		if (now.getDay() === parseInt(element.getAttribute('data-day'))) {
			element.classList.add('current-day'); // agrego la clase current-day 
			element.innerHTML = "Hoy";
		}
	});
 
}
 
(function(d) {
 
	createList();
	selectCurrentDay();
 
})(document);
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

Ocultar Tabla Si La Fecha Actual A Pasado La Fecha Asignada.

Publicado por Luis Sabi (24 intervenciones) el 31/01/2017 02:40:47
Todo Funciona Bien, Solo Que No Ejecuta La Función Sobre El Día Domingo. ¿?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 477
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ocultar Tabla Si La Fecha Actual A Pasado La Fecha Asignada.

Publicado por Alejandro (130 intervenciones) el 31/01/2017 23:51:38
Hola Luis, me equivoque el método getDay() retorna un valor entre 0 - 6 y no 1 - 7 como lo había hecho. El archivo JS debe quedar así.

current_day.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/**
 * createList 
 * Crea los elementos de la lista de forma dinamica.
 * 
 * @return undefined
 */
function createList() {
	var ul = document.getElementById('menu-content');
 
	var days = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'];
 
	for (var i = 0; i < 7; i++) {
		var template = "<li class='list__item'>" +
			"<a href='#' class='list__link' data-day='" + i + "'>" + days[i] + "</a>" +
			"</li>";
 
		// Agrego cada elemento LI al UL
		ul.innerHTML += template;
	}
}
 
/**
 * selectCurrentDay 
 * Selecciona el dia actual.
 * 
 * @return undefined
 */
function selectCurrentDay() {
	var now = new Date();
	var currentDay = (now.getDay() > 0) ? now.getDay() - 1 : now.getDay();
	var items = Array.prototype.slice.call(document.querySelectorAll('a.list__link'));
 
	items.forEach(function(element, index) {
		if (currentDay === parseInt(element.getAttribute('data-day'))) {
			element.classList.add('current-day'); // agrego la clase current-day 
			element.innerHTML = "Hoy";
		}
	});
}
 
(function(d) {
 
	createList();
	selectCurrentDay();
 
})(document);
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Ocultar Tabla Si La Fecha Actual A Pasado La Fecha Asignada.

Publicado por Luis Sabi (24 intervenciones) el 02/02/2017 15:47:24
Listo Alejandro Muchas Gracias. :D Hasta Ahora Todo Funciona Bien. tengo Otra Cuestión. Tengo UN Menu Y Sus respetivos Submenu, Lo Que Quiero Es Que Al hacer Click Sobre Los Titulos Del Menu, Despliegue Hacia Abajo El Submenu Y El Titulo Del Menu Quede Seleccionado Con Cambio De Color. Y Cuando Se Oculte Vuelva A Su Color Original. Aquí tengo Un Ejemplo. Aww Y Que El Borde Solo Se Efectue En El Titulo del menu Y No se Amplie Con Los Subtitulos. Gracias Alejandro.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<title>Submenu Paises Y Ligas</title>
</head>
<style>
 .submenu-team{
  display:none;
 }
 .sport-links__item{
	opacity:1;
	cursor:pointer;
		border:solid 1px #333;
   margin-top:1px;
   background-color:#111;
  list-style:none;
 
}
.sport-links__links{
 
  width:100%;
  text-decoration:none;
  color:#fff;
  font-family:"Comic Sans MS", cursive;
  line-height:45px;
  margin-left:5px;
}
 
.sport-links__item:hover{
     background-color:#000;	
     border:solid 2px #fc0;
}
.sport-links__links:hover{
   color:#fc0;	
}
</style>
<body>
 
  <div id="Futbol" class="content-general">
              <div class="content-header" id="content-header-futbol">
                <i class="icon-circle-down" id="down-3"></i>
                <h2>Futbol Mundial</h2>
               </div>
              <div class="content-general-body" id="list3">
 
              <ul class="sport-links">
 
                 <li class="sport-links__item">
                      <span class="icon-calendar"></span>
                      <a href="" title="Hoy" class="sport-links__links">
                      <span>Liga De Campeones</span>
                      </a>
                </li>
 
 
                   <li class="sport-links__item" id="internacional">
                      <a href="javascript:void(0);" title="Hoy" class="sport-links__links">
                      <span>Internacional</span>
                      </a>
                   <ul class="submenu-team" id="submenu-team">
 
                   <!-- SubMenu Copas Mundiales Más Importantes-->
                   <li class="sport-links__item">
                      <a href="" title="Hoy" class="sport-links__links">
                      <span>Copa Mundial De La Fifa</span>
                      </a>
                   </li>
                   <li class="sport-links__item">
                      <a href="" title="Hoy" class="sport-links__links">
                      <span>UEFA Champions League</span>
                      </a>
                   </li>
                   <li class="sport-links__item">
                      <a href="" title="Hoy" class="sport-links__links">
                      <span>Bridgestone Libertadores</span>
                      </a>
                   </li>
                   <li class="sport-links__item">
                      <a href="" title="Hoy" class="sport-links__links">
                      <span>Copa America</span>
                      </a>
                   </li>
                   <li class="sport-links__item">
                      <a href="" title="Hoy" class="sport-links__links">
                      <span>Copa Confederaciones</span>
                      </a>
                   </li>
                   <li class="sport-links__item">
                      <a href="" title="Hoy" class="sport-links__links">
                      <span>UEFA Europa League</span>
                      </a>
                   </li>
                   <li class="sport-links__item">
                      <a href="" title="Hoy" class="sport-links__links">
                      <span>Mundial De Clubes</span>
                      </a>
                   </li>
                   </ul></li>
                   <script>
		               $(document).ready(function(){
                               $("#internacional").click(function(){
                               $("#submenu-team").slideToggle('slow', "linear");
                               });
                               });
                         </script>
 
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 477
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ocultar Tabla Si La Fecha Actual A Pasado La Fecha Asignada.

Publicado por Alejandro (130 intervenciones) el 03/02/2017 01:04:49
Hola Luis te dejo un ejemplo a ver si te sirve. Está hecho en JQuery y en Javascript puro. Fijate que para probar uno y otro tenes que comentar y descomentar algunas líneas tanto en el CSS como en JS.

Por último como una critica constructiva si recién estás empezando con la programación en JS yo diria que mejor utilices javascript puro
lo que hoy en día se conoce como Vainilla JS, esto evita que tengas que utilizar librerías lo cual no esta mal yo tambien las utilizo pero a veces es mejor JS puro. Es solo una recomendación.

Nos comentas si te sirvio. Saludos.

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8" />
        <title>Submenu Paises Y Ligas</title>
        <style>
            ul {
                padding-left: 0;
            }
 
             /* Para JS puro comentar estas lineas */
            .submenu-team {
                display: none;
            }
 
            /* Para JS puro descomentar estas lineas y comentar la anterior*/
            /*
            
            .submenu-team {
                display: block;
                max-height: 0;
                overflow: hidden;
                transition: all .4s linear;
            } 

            */
 
            .sport-links__item{
                position: relative;
                opacity:1;
                cursor:pointer;
                border:solid 1px #333;
                margin-top:1px;
                background-color:#111;
                list-style:none;
 
            }
            .sport-links__links{
                width:100%;
                text-decoration:none;
                color:#fff;
                font-family:"Comic Sans MS", cursive;
                line-height:45px;
                margin-left:5px;
            }
 
            .sport-links__item:hover {
                background-color:#000;
                border:solid 2px #fc0;
            }
 
            /* SUBMENU ABIERTO */
            .sport-links__item.active {
                background-color:#000;
                border:solid 2px #fc0;            
            }
 
            .sport-links__item.active > a span {
                color: #fc0;
            }
 
            .sport-links__links:hover{
                color:#fc0;
            }
        </style>
    </head>
    <body>
        <div id="Futbol" class="content-general">
            <div class="content-header" id="content-header-futbol">
                <i class="icon-circle-down" id="down-3"></i>
                <h2>Futbol Mundial</h2>
            </div>
            <div class="content-general-body" id="list3">
 
                <ul class="sport-links">
                    <li class="sport-links__item">
                        <span class="icon-calendar"></span>
                        <a href="" title="Hoy" class="sport-links__links">
                            <span>Liga De Campeones</span>
                        </a>
                    </li>
 
                    <li class="sport-links__item" id="internacional">
                        <a href="javascript:void(0);" title="Hoy" class="sport-links__links">
                            <span>Internacional</span>
                        </a>
                        <!-- Submenu -->
                        <ul class="submenu-team" id="submenu-team">
 
                            <!-- SubMenu Copas Mundiales Más Importantes-->
                            <li class="sport-links__item">
                                <a href="" title="Hoy" class="sport-links__links">
                                    <span>Copa Mundial De La Fifa</span>
                                </a>
                            </li>
                            <li class="sport-links__item">
                                <a href="" title="Hoy" class="sport-links__links">
                                    <span>UEFA Champions League</span>
                                </a>
                            </li>
                            <li class="sport-links__item">
                                <a href="" title="Hoy" class="sport-links__links">
                                    <span>Bridgestone Libertadores</span>
                                </a>
                            </li>
                            <li class="sport-links__item">
                                <a href="" title="Hoy" class="sport-links__links">
                                    <span>Copa America</span>
                                </a>
                            </li>
                            <li class="sport-links__item">
                                <a href="" title="Hoy" class="sport-links__links">
                                    <span>Copa Confederaciones</span>
                                </a>
                            </li>
                            <li class="sport-links__item">
                                <a href="" title="Hoy" class="sport-links__links">
                                    <span>UEFA Europa League</span>
                                </a>
                            </li>
                            <li class="sport-links__item">
                                <a href="" title="Hoy" class="sport-links__links">
                                    <span>Mundial De Clubes</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="menu.js"></script>
    </body>
</html>

menu.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/* Version Jquery */
 
$(document).ready(function() {
    var $items = $('.sport-links__item');
 
    $items.on('click', function() {
        var $submenu = $(this).find('.submenu-team');
 
        if ($submenu.length > 0) {
            $(this).toggleClass('active');
            $submenu.slideToggle('slow', 'linear');
        }
    });
});
 
/* Version JS Puro */
/*
(function(d) {
    var items = [].slice.call(d.querySelectorAll('.sport-links__item'));

    items.forEach(function(element, index) {
        element.addEventListener('click', function(e) {
            var submenu = [].slice.call(this.querySelectorAll('ul.submenu-team'));

            if (submenu.length > 0) {
                this.classList.toggle('active');

                var count_subitems = submenu[0].children.length; // cantidad de subitems

                if (submenu[0].style.maxHeight) {
                    submenu[0].style.maxHeight = null;
                } else {
                    // determino la altura del submenu multiplicando el numero de subitems por la altura
                    // aprox. de cada item (50px). 
                    submenu[0].style.maxHeight = (count_subitems * 50) + "px";
                }
            }
        }, false);
    });
})(document);
*/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Ocultar Tabla Si La Fecha Actual A Pasado La Fecha Asignada.

Publicado por Luis Sabi (24 intervenciones) el 03/02/2017 05:53:17
Alejandro, Que Pena Tanta Molestia, Pero Ahora Me Resulto otro Problemilla Con Mi Sitio Web, Y Ps He Notado Que Ud Tiene Bastante Conocimento En Jquery y JavaScript, En esta Parte Ya Llevo Varios Días Pero No he Conseguido Dar Con El resultado Que necesito.
Tengo Una Lista De Paises, Y Cada Pais Desprende Las Ligas Y Copas Correspondientes, Tengo Un Div Center Con target. Por Ejemplo.

España
Liga Primera Division (Boton)

Esta Me Muestra A Traves De Su href El Div Oculto #Liga-Primera-División Que Esta En El Div Center, Lo Que Quiero Es Dar Click Sobre
El Boton Liga Primera Division Se Muestre El Div Oculto Y este Boton Quede Con Un Color Amarillo Que Representa Que Esta Seleccionado, El problema Reside Cuando Lo Quiero Desmarcar, Al presionar De Nuevo El Boton Debería Ocultar El Div Que Muestra Y Simplemente Quedar En index. E Igualmente El Boton Vuelva A Su estado Y Color Normal.

Mientras Tratare De hacer Un Ejemplo. pero Porfa, Le Agradecería Enserio Muchisimo, Que Me Ayudara Con Esto.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

<a href="#">Ocultar Tabla Si La Fecha Actual A Pasado La Fecha Asignada.</a>

Publicado por Luis Sabi (24 intervenciones) el 03/02/2017 06:21:24
Aquí Esta Alejandro, he Hecho Un Ejemplo, No Esta Muy Excelente Pero creo Que Me Podeis Entender. le Agradezco Por Todo. Y Le Agradecería Aún Más Me Ayudara Con esto.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo La web</title>
</head>
<style>
#left{
	width:calc(19% - 20px);
   float:left;
}
#center{
	margin:auto;
	width:calc(55% - 10px);
}
 
#right{
	width:calc(26% - 10px);
}
.target > div {
    display:none;
}
.target > div:target{
    display:block;
}
</style>
<body>
 
<div class="contenedor-izquierdo" id="left">
 
<div class="title-futbol">
<h1>Fútbol Mundial</h1>
</div>
<ul class="paises-futbol">
  <li><a href=""><span>Inglaterra</span></a></li>
    <ul class="submenu" id="submenu-inglaterra">
      <li><a href="EjemploLaweb.html#premiere-league"><span>Premiere League</span></a></li>
      <li><a href="EjemploLaweb.html#Fa-Cup"><span>Fa Cup</span></a></li>
    </ul>
 
  <li><a href=""><span>España</span></a></li>
    <ul class="submenu" id="submenu-españa">
        <li><a href="EjemploLaweb.html#Primera-Division"><span>Primera Division</span></a></li>
    </ul>
 
 
</ul>
</div>
 
 
<div id="index-center" class="target">
           <h3>Aquí Va Todos Los Paridos de Todos Los Dias, este Es la Pagina Principal, cada Vez Que Ingrese A La Página Mostrara
           El Contenido De Este Div. Pero No Se Como hacer Para Que Aparezca En La Página Principal pero A La Vez desaparezca Cuando Clickeo Otro Elemento. Lo           He Intentado Poniendolo Fuera Del target Pero Quedaría Fijo, El Display siempre Estara.
       </h3>
<div class="target" id="center">
 
 
      </div>
 
 
      <div id="premiere-league">
 
            <div class="content-header-center">
               <h4><a>Apuestas De Fútbol</a></h4>
            </div>
            <div class="content-general-days">
 
          <p>Aquí va Todo El Contenido De La Premiere League De Inglaterra </p>
          </div>
          </div>
 
      <div id="Fa-Cup">
 
            <div class="content-header-center">
               <h4><a>Fa Cup Inglaterra</a></h4>
            </div>
            <div class="content-general-days">
      <p>En Este Recuadro se Mostrara Todo El Conytenido De La fa Cup.</p>
      </div>
      </div>
 
     <div id="Primera-Division">
     <div class="content-header-center">
               <h4><a>Primera Division España </a></h4>
            </div>
            <div class="content-general-days">
      <p> Mostrara Todo El Conytenido De La Primera Divisio De España.</p>
      </div>
     </div>
 
</div>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 477
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

<a href="#">Ocultar Tabla Si La Fecha Actual A Pasado La Fecha Asignada.</a>

Publicado por Alejandro (130 intervenciones) el 04/02/2017 06:32:16
Hola Luis, te dejo el codigo que capaz resuelva el problema. Te dejo también algunos estilos para que apliques a el sitio si queres.

apuestas_de_futbol.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE>
<html lang="es">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <link rel="stylesheet" type="text/css" href="styles.css">
        <title>Apuestas De Fútbol</title>
    </head>
    <body>
 
        <!-- Sidebar -->
        <aside class="contenedor-izquierdo sidebar" id="sidebar">
            <div class="title-futbol">
                <h1><a href="apuestas_de_futbol.html">Fútbol Mundial</a></h1>
            </div>
            <ul class="paises-futbol">
                <li class="paises-futbol__title">Inglaterra</li>
                <ul class="submenu" id="submenu-inglaterra">
                    <li><a class="submenu-link" href="#" data-article="premiere-league"><span>Premiere League</span></a></li>
                    <li><a class="submenu-link" href="#" data-article="fa-cup"><span>Fa Cup</span></a></li>
                </ul>
 
                <li class="paises-futbol__title">España</a></li>
                <ul class="submenu" id="submenu-espana">
                    <li><a class="submenu-link" href="#" data-article="primera-division"><span>Primera Division</span></a></li>
                </ul>
            </ul>
        </aside>
 
        <!-- Main content -->
        <div id="index-center" class="main-container">
 
            <header class="header">
                <h1>Apuestas De <span>Fútbol</span></h1>
                <a href="#" class="toggle-menu" id="toggle-menu">Menu</a>
            </header>
            <div class="main-content active" id="main-content">
                <h1 class="main-title">Apuestas De <span>Fútbol</span></h1>
                <p>Aquí Va Todos Los Paridos de Todos Los Dias, este Es la Pagina Principal, cada Vez Que Ingrese A La Página Mostrara
                    El Contenido De Este Div. Pero No Se Como hacer Para Que Aparezca En La Página Principal pero A La Vez desaparezca Cuando Clickeo Otro Elemento.
                    Lo He Intentado Poniendolo Fuera Del target Pero Quedaría Fijo, El Display siempre Estara.
                </p>
            </div>
 
            <!-- Esta seccion contiene cada una de las ligas y copas -->
            <!-- Cada articulo representa una liga o copa -->
            <section class="content" id="center">
 
                <article id="premiere-league" class="article">
                    <div class="content-header-center">
                        <h3>Premiere League De Inglaterra</h3>
                    </div>
                    <div class="content-general-days">
                        <p>Aquí va Todo El Contenido De La Premiere League De Inglaterra </p>
                    </div>
                </article>
 
                <article id="fa-cup" class="article">
                    <div class="content-header-center">
                        <h3>Fa Cup Inglaterra</h3>
                    </div>
                    <div class="content-general-days">
                        <p>En Este Recuadro se Mostrara Todo El Contenido De La Fa Cup.</p>
                    </div>
                </article>
 
                <article id="primera-division" class="article">
                    <div class="content-header-center">
                        <h3>Primera Division España</h3>
                    </div>
                    <div class="content-general-days">
                        <p> Mostrara Todo El Contenido De La Primera Division De España.</p>
                    </div>
                </article>
 
            </section>
            <script type="text/javascript" src="apuestas_de_futbol.js"></script>
        </body>
    </html>

styles.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
 
  body {
  font-size: 14px;
  font-family: Helvetica, Arial, sans-serif;
  }
  p {
  margin-bottom: .5em;
  }
  /* SIDEBAR MENU */
  ul {
  list-style: none;
  padding: 0;
  }
  .sidebar{
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 250px;
  min-height: 100vh;
  background: teal;
  z-index: 8000;
  color: #000;
  transition: all .3s ease;
  }
  .sidebar.show {
    left: 0;
  }
 
  .title-futbol {
  text-align: center;
  color: #FFF;
  background: #212121;
  height: 60px;
  border-bottom: 2px solid gold;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  }
  .title-futbol h1 a {
  margin: 0;
  padding: .5em;
  text-transform: uppercase;
 
  text-decoration: none;
  color: #FFF;
  }
  .paises-futbol__title {
  padding: .5em;
  font-weight: bold;
  color: #212121;
  border-bottom: 1px solid #ECECEC;
  text-transform: uppercase;
  }
  .submenu {
  /*margin-left: 1em;*/
  }
  .submenu a {
  text-decoration: none;
  color: #DDD;
  padding: .5em;
  display: block;
  }
  .submenu a:hover {
    color: gold;
  }
  .submenu a.active-link {
  color: gold;
  background: #212121;
  border-bottom: 1px solid gold;
  }
 
  .header {
  position: relative;
  background: #ECECEC;
  padding: 1em;
  display: flex;
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
  }
  .header h1 {
    font-size: 1.6em;
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(0,0,0,.4);
    text-align: center;
    text-transform: uppercase;
    color: #333;
  }
  .header h1 span {
     color: #149abf;
  }
 
  .toggle-menu {
  padding: .5em;
  background: #000;
  border: 1px solid gold;
  color :#FFF;
  display: none;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
  }
 
  .toggle-menu.active {
    color: #000;
    border-color: #FFF;
    background: gold;
  }
 
  /* MAIN CONTENT */
  .main-container {
    margin-left: 250px;
  }
 
  @media screen and (max-width: 768px) {
      .sidebar {
      left: -100%;
      }
      .main-container {
      margin: 0;
      }
      .toggle-menu {
        display: block;
      }
  }
 
 
  .main-content,
  .content {
  padding: 1em;
  }
    .article,
    .main-content {
        display: none;
    }
    .article.active,
    .main-content.active {
        display: block;
    }
 
    .main-title {
        font-size: 60px;
        font-weight: 500;
        text-shadow: 0 1px 1px rgba(0,0,0,.4);
        text-align: center;
        text-transform: uppercase;
        color: #444;
    }
    .main-title span{
        color: #149abf;
    }

apuestas_de_futbol.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
(function(d) {
          var sidebar = document.getElementById('sidebar');
          var index = document.getElementById('main-content');
          var sections = [].slice.call(document.querySelectorAll('.submenu-link'));
 
          function toggleSidebar() {
              if (sidebar.classList.contains('show')) {
                  sidebar.classList.remove('show');
              } else {
                  sidebar.classList.add('show');
              }
          }
 
          sections.forEach(function(element, i) {
              element.addEventListener('click', function(e) {
                  e.preventDefault();
 
                  if (window.innerWidth <= 768) {
                      toggleSidebar();
                  }
 
                  // oculto la seccion actual
                  var currentArticle = document.querySelector('.article.active');
 
                  var article = this.dataset.article;
                  var newArticle = document.getElementById(article);
 
                  if (currentArticle) {
                      if (currentArticle.id !== newArticle.id) {
                          currentArticle.classList.remove('active');
                          document.querySelector('a[data-article="' + currentArticle.id + '"]').classList.remove('active-link');
                          newArticle.classList.add('active');
                          this.classList.add('active-link');
                      } else {
                          currentArticle.classList.remove('active');
                          document.querySelector('a[data-article="' + currentArticle.id + '"]').classList.remove('active-link');
                      }
                  } else {
                      // muestro la nueva seccion           
                      if (!newArticle.classList.contains('active')) {
                          newArticle.classList.add('active');
                          this.classList.add('active-link');
                      }
                  }
 
                  // Seccion de inicio - Solo visible cuando no hay articulos seleccionados
                  var elements = document.querySelectorAll('.article.active');
                  if (elements) {
                      if (elements.length > 0) {
                          index.classList.remove('active');
                      } else {
                          index.classList.add('active');
                      }
                  }
 
              }, false);
          });
 
          // EXTRA TOGGLE MENU RESPONSIVE 
          document.getElementById('toggle-menu').addEventListener('click', function(e) {
              e.preventDefault();
              this.classList.toggle('active');
              toggleSidebar();
          }, false);
      })(document);

Comentanos si te sirvio, suerte. Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

<a href="#">Ocultar Tabla Si La Fecha Actual A Pasado La Fecha Asignada.</a>

Publicado por Luis Sabi (24 intervenciones) el 06/02/2017 22:55:32
Buenas Tardes Alejandro, Trabajo De Maravilla, Solo Que Resulto Con Otro Problemita, Cuando Tengo Dos opciones Con El Mismo
Data-Article El Active Queda Todo El Tiempo. Aquí Esta El Ejemplo. Porfavor. Y Muchas Gracias.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
<!DOCTYPE>
<html lang="es">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <link rel="stylesheet" type="text/css" href="styles.css">
        <title>Apuestas De Fútbol</title>
    </head>
    <body>
 
        <!-- Sidebar -->
        <aside class="contenedor-izquierdo sidebar" id="sidebar">
          <div class="content-futbol">
           <div class="title-futbol">
           <h1><a href="">Fútbol Destacado</a></h1>
          </div>
          <ul class="paises-futbol">
                    <li><a class="submenu-link" href="#" data-article="premiere-league"><span>Premiere League</span></a></li>
                    <li><a class="submenu-link" href="#" data-article="fa-cup"><span>Fa Cup</span></a></li>
          </ul>
          </div>
 
 
            <div class="title-futbol">
                <h1><a href="apuestas_de_futbol.html">Fútbol Mundial</a></h1>
            </div>
            <ul class="paises-futbol">
                <li class="paises-futbol__title">Inglaterra</li>
                <ul class="submenu" id="submenu-inglaterra">
                    <li><a class="submenu-link" href="#" data-article="premiere-league"><span>Premiere League</span></a></li>
                    <li><a class="submenu-link" href="#" data-article="fa-cup"><span>Fa Cup</span></a></li>
                </ul>
 
                <li class="paises-futbol__title">España</a></li>
                <ul class="submenu" id="submenu-espana">
                    <li><a class="submenu-link" href="#" data-article="primera-division"><span>Primera Division</span></a></li>
                </ul>
            </ul>
        </aside>
 
        <!-- Main content -->
        <div id="index-center" class="main-container">
 
            <header class="header">
                <h1>Apuestas De <span>Fútbol</span></h1>
                <a href="#" class="toggle-menu" id="toggle-menu">Menu</a>
            </header>
 
            <div class="main-content active" id="main-content">
                <h1 class="main-title">Apuestas De <span>Fútbol</span></h1>
                <p>Aquí Va Todos Los Paridos de Todos Los Dias, este Es la Pagina Principal, cada Vez Que Ingrese A La Página Mostrara
                    El Contenido De Este Div. Pero No Se Como hacer Para Que Aparezca En La Página Principal pero A La Vez desaparezca Cuando Clickeo Otro Elemento.
                    Lo He Intentado Poniendolo Fuera Del target Pero Quedaría Fijo, El Display siempre Estara.
                </p>
            </div>
 
            <!-- Esta seccion contiene cada una de las ligas y copas -->
            <!-- Cada articulo representa una liga o copa -->
            <section class="content" id="center">
 
                <article id="premiere-league" class="article">
                    <div class="content-header-center">
                        <h3>Premiere League De Inglaterra</h3>
                    </div>
                    <div class="content-general-days">
                        <p>Aquí va Todo El Contenido De La Premiere League De Inglaterra </p>
                    </div>
                </article>
 
                <article id="fa-cup" class="article">
                    <div class="content-header-center">
                        <h3>Fa Cup Inglaterra</h3>
                    </div>
                    <div class="content-general-days">
                        <p>En Este Recuadro se Mostrara Todo El Contenido De La Fa Cup.</p>
                    </div>
                </article>
 
                <article id="primera-division" class="article">
                    <div class="content-header-center">
                        <h3>Primera Division España</h3>
                    </div>
                    <div class="content-general-days">
                        <p> Mostrara Todo El Contenido De La Primera Division De España.</p>
                    </div>
                </article>
 
            </section>
            <script>
 
          var sidebar = document.getElementById('sidebar');
          var index = document.getElementById('main-content');
          var sections = [].slice.call(document.querySelectorAll('.submenu-link'));
 
          function toggleSidebar() {
              if (sidebar.classList.contains('show')) {
                  sidebar.classList.remove('show');
              } else {
                  sidebar.classList.add('show');
              }
          }
 
          sections.forEach(function(element, i) {
              element.addEventListener('click', function(e) {
                  e.preventDefault();
 
                  if (window.innerWidth <= 768) {
                      toggleSidebar();
                  }
 
                  // oculto la seccion actual
                  var currentArticle = document.querySelector('.article.active');
 
                  var article = this.dataset.article;
                  var newArticle = document.getElementById(article);
 
                  if (currentArticle) {
                      if (currentArticle.id !== newArticle.id) {
                          currentArticle.classList.remove('active');
                          document.querySelector('a[data-article="' + currentArticle.id + '"]').classList.remove('active-link');
                          newArticle.classList.add('active');
                          this.classList.add('active-link');
                      } else {
                          currentArticle.classList.remove('active');
                          document.querySelector('a[data-article="' + currentArticle.id + '"]').classList.remove('active-link');
                      }
                  } else {
                      // muestro la nueva seccion           
                      if (!newArticle.classList.contains('active')) {
                          newArticle.classList.add('active');
                          this.classList.add('active-link');
                      }
                  }
 
                  // Seccion de inicio - Solo visible cuando no hay articulos seleccionados
                  var elements = document.querySelectorAll('.article.active');
                  if (elements) {
                      if (elements.length > 0) {
                          index.classList.remove('active');
                      } else {
                          index.classList.add('active');
                      }
                  }
 
              }, false);
          });
 
          // EXTRA TOGGLE MENU RESPONSIVE 
          document.getElementById('toggle-menu').addEventListener('click', function(e) {
              e.preventDefault();
              this.classList.toggle('active');
              toggleSidebar();
		  });
 
            </script>
        </body>
        <style>
        * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
 
  body {
  font-size: 14px;
  font-family: Helvetica, Arial, sans-serif;
  }
  p {
  margin-bottom: .5em;
  }
  /* SIDEBAR MENU */
  ul {
  list-style: none;
  padding: 0;
  }
  .sidebar{
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 250px;
  min-height: 100vh;
  background: teal;
  z-index: 8000;
  color: #000;
  transition: all .3s ease;
  }
  .sidebar.show {
    left: 0;
  }
 
  .title-futbol {
  text-align: center;
  color: #FFF;
  background: #212121;
  height: 60px;
  border-bottom: 2px solid gold;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  }
  .title-futbol h1 a {
  margin: 0;
  padding: .5em;
  text-transform: uppercase;
 
  text-decoration: none;
  color: #FFF;
  }
  .paises-futbol__title {
  padding: .5em;
  font-weight: bold;
  color: #212121;
  border-bottom: 1px solid #ECECEC;
  text-transform: uppercase;
  }
  .submenu {
  /*margin-left: 1em;*/
  }
  .submenu a {
  text-decoration: none;
  color: #DDD;
  padding: .5em;
  display: block;
  }
  .submenu a:hover {
    color: gold;
  }
  .submenu a.active-link {
  color: gold;
  background: #212121;
  border-bottom: 1px solid gold;
  }
 
  .header {
  position: relative;
  background: #ECECEC;
  padding: 1em;
  display: flex;
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
  }
  .header h1 {
    font-size: 1.6em;
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(0,0,0,.4);
    text-align: center;
    text-transform: uppercase;
    color: #333;
  }
  .header h1 span {
     color: #149abf;
  }
 
  .toggle-menu {
  padding: .5em;
  background: #000;
  border: 1px solid gold;
  color :#FFF;
  display: none;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
  }
 
  .toggle-menu.active {
    color: #000;
    border-color: #FFF;
    background: gold;
  }
 
  /* MAIN CONTENT */
  .main-container {
    margin-left: 250px;
  }
  .main-content,
  .content {
  padding: 1em;
  }
    .article,
    .main-content {
        display: none;
    }
    .article.active,
    .main-content.active {
        display: block;
    }
 
    .main-title {
        font-size: 60px;
        font-weight: 500;
        text-shadow: 0 1px 1px rgba(0,0,0,.4);
        text-align: center;
        text-transform: uppercase;
        color: #444;
    }
    .main-title span{
        color: #149abf;
    }
  @media screen and (max-width: 768px) {
      .sidebar {
      left: -100%;
      }
      .main-container {
      margin: 0;
      }
      .toggle-menu {
        display: block;
      }
  }
 
 
 
    </style>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 477
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

<a href="#">Ocultar Tabla Si La Fecha Actual A Pasado La Fecha Asignada.</a>

Publicado por Alejandro (130 intervenciones) el 07/02/2017 00:41:17
Hola Luis, modifique el código y ahora cuando haces clic en un link del sidebar si existe otro link que tenga el mismo data-article lo va a activar también. Recuerda que cada data-article corresponde a un id de un articulo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
(function(d) {
        var sidebar = document.getElementById('sidebar');
        var index = document.getElementById('main-content');
        var sections = [].slice.call(document.querySelectorAll('.submenu-link'));
 
        function toggleSidebar() {
          if (sidebar.classList.contains('show')) {
            sidebar.classList.remove('show');
          } else {
            sidebar.classList.add('show');
          }
        }
 
        function activeLinkSidebar(links) {
          links.forEach(function(e, i) {
            e.classList.add('active-link');
          });
        }
 
        sections.forEach(function(element, i) {
          element.addEventListener('click', function(e) {
            e.preventDefault();
 
            if (window.innerWidth <= 768) {
              toggleSidebar();
            }
 
            // oculto la seccion actual
            var currentArticle = document.querySelector('.article.active');
            var article = this.dataset.article;
            var newArticle = document.getElementById(article);
            var links = [].slice.call(document.querySelectorAll('a[data-article="' + this.getAttribute('data-article') + '"]'));
 
            if (currentArticle) {
              var sidebarLinks = [].slice.call(document.querySelectorAll('a[data-article="' + currentArticle.id + '"]'));
 
              currentArticle.classList.remove('active');
 
              sidebarLinks.forEach(function(e, i) {
                e.classList.remove('active-link');
              });
 
              if (currentArticle.id !== newArticle.id) {
                newArticle.classList.add('active');
                activeLinkSidebar(links);
              }
 
            } else {
              // muestro la nueva seccion           
              if (!newArticle.classList.contains('active')) {
                newArticle.classList.add('active');
                activeLinkSidebar(links);
              }
            }
 
            // Seccion de inicio - Solo visible cuando no hay articulos seleccionados
            var elements = document.querySelectorAll('.article.active');
            if (elements) {
              if (elements.length > 0) {
                index.classList.remove('active');
              } else {
                index.classList.add('active');
              }
            }
 
          }, false);
        });
 
        // EXTRA TOGGLE MENU RESPONSIVE 
        document.getElementById('toggle-menu').addEventListener('click', function(e) {
          e.preventDefault();
          this.classList.toggle('active');
          toggleSidebar();
        }, false);
      })(document);

Prueba con esto y comentanos. Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

<a href="#">Ocultar Tabla Si La Fecha Actual A Pasado La Fecha Asignada.</a>

Publicado por Luis Sabi (24 intervenciones) el 07/02/2017 17:04:28
Alejandro, Este fragmento de Código ya Lo Hemos Trabajado, Solo Que Ando Modificandolo Pero Sin Ningun resultado positivo. Porfa Ay Entre Lineas De Comentarios Te Dejo Mis Ideas, Le agradeceria Mucho me Ayudara, O Me Dijera Los Nombres Claves Para buscar Y Seguir Intentando Hasta dar Con El resultado Final Que deseo.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<title>Mostrando De Acuerdo A La Fecha. </title>
</head>
<body>
 
<!-- Objetivo: Se Agregan Los Partidos Por Liga, Los Que Más Se Puedan. Segundo: dependiendo De la Fecha En La Que Jueguen Así Mismo Se Mostrara, Si El Usuario Quiere Ver Los Partidos De La Liga Sea Cual Sea, Solo Mirará Los De la Semana Actual, Sin Importar Que En El Código Madre esten Todas Las Fechas. Tercero: En Días Se Mostrara Los Partidos De Hoy, ya Que El
Código Hara Una Pregunta.- Quien juega Hoy D/M/A ? Y Los Partidos Que Esten dentro De Este Parametro De semana Se Mostraran. Cuarto: Cuando El partido Llegue A Su Momento De Inicio, Este Se Eliminara De El Cuadro De Apuestas. Y Se Pasara A Un En Vivo, Aunque Esta Opcion Aún No La Tengo Muy Clara. -->
 
<!--  MANOS A LA OBRA Y QUE DIOS ME AYUDE. ESTA SERA LA MEJOR PÁGINA WEB DE APUESTAS DEL MUNDO. -->
   <div id="liga-espanola" class="liga-espanola-primera-division">
 
			<div class="titulo">
				<h1>Liga Española (Primera División)</h1>
			</div>
 
			<div class="subtitulo">
				<span> Resulatdo 1 x 2</span>
			</div>
 
			<div class="cuerpo-liga">
 
				<!-- 					
					Cada una de las filas TR, es un partido. Cada una tiene la clase data-team y el atributo data-date
					que tiene como valor la fecha y hora del partido. 
					Este ultimo es utilizado por la funcion OcultarPorFecha (ver archivo ocultar_apuestas.js) para comparar 
					si la apuesta a el partido aun esta permitida.
				 -->
 
				<table>
					<tbody>
 
 
						<tr class="date-team" data-date="29-02-2017" data-hours="17:30">
							<td>15 De Febrero 2017 a Las 17:30 </td>
							<td class="mb-option-button">
								<button type="submit" class="button">
 
					        <div class="name-team-option-1">UD Las Palmas</div>
					        <div class="name-value-option-1">2.65</div>
								</button>
							</td>
                            <td class="mb-option-button">
								<button type="submit" class="button">
 
					        <div class="name-team-option-x">x</div>
					        <div class="name-value-option-x">2.65</div>
								</button>
							</td>
                            <td class="mb-option-button">
								<button type="submit" class="button">
 
					        <div class="name-team-option-2">Malaga</div>
					        <div class="name-value-option-2">2.65</div>
								</button>
							</td>
						</tr>
 
						<tr class="date-team" data-date="29-02-2017" data-hours="12:00">
							<td>15 De Febrero 2017 a Las 17:30 </td>
							<td class="mb-option-button">
								<button type="submit" class="button">
 
					        <div class="name-team-option-1">Barcelona</div>
					        <div class="name-value-option-1">2.65</div>
								</button>
							</td>
                            <td class="mb-option-button">
								<button type="submit" class="button">
 
					        <div class="name-team-option-x">x</div>
					        <div class="name-value-option-x">2.65</div>
								</button>
							</td>
                            <td class="mb-option-button">
								<button type="submit" class="button">
 
					        <div class="name-team-option-2">Real Madrid</div>
					        <div class="name-value-option-2">2.65</div>
								</button>
							</td>
						</tr>
					</tbody>
				</table>
 
			</div>
		</div>
 
 
 
   <div  class="index-center">
     <div class="index-center-bet">
     <span>Proximos Eventos</span>
      <table>
        <tbody>
          <tr>
          <td>Hora</td>
          <td>Partidos</td>
          <td>1</td>
           <td>x</td>
           <td>2</td>
 
        </tbody>
       </table>
       <table>
       <tbody>
 
       <tr class="Aquí">
 
 
 
       </tr>
       </tbody>
 
       </table>
 
     </div>
  </div>
<script>
 
 
function ocultarPorFecha() {
	var fechaActual = new Date();
 
	// 2) RECUPERO TODOS LOS TR QUE TIENE LA CLASE .date-team
	var partidos = document.querySelectorAll('tr.date-team'); // => devuelve un NodeList
	partidos = Array.prototype.slice.call(partidos); // 3) Convierto el NodeList en un Array para poder recorrerlo
 
	// 4) Utilizo el metodo forEach para recorrer el array
	partidos.forEach(function(element, index) {
		var fechaInicioPartido = element.getAttribute('data-date'); // 5) obtengo la fecha del partido 
		fechaInicioPartido = construyeFecha(fechaInicioPartido); // 6) covierto la fecha con tu funcion
 
		if (fechaActual > fechaInicioPartido) {
			element.style.display = "none";
		}
 
 
		<!--
		<!-- else if (fechaActual  == fechaInicioPartido )
		<!-- {     element.append to ('.Aquí')
		<!--
		<!--   Entonces La Idea es Que Los Partidos Que Pertenezcan A El Día Actual Se Mostraran En  Próximos Eventos Y Se Organizaran de Acuerdo A
		<!--   Su Hora. Si Es Posible Realizar Un Conteo Regresivo, Ejemplo, fechaInicioPartido 31 Marzo A Las 10 De La Mañana, Y La FechaActual Es     <!--31 De Marzo 9:00 De La Mañana,Entonces En El td = Hora, Mostrara --Falta 1 Hora Para El inicio Del Partido, Esto Lo He Intentado Creando Otro Data 
		<!--Denominado Data-Hours. Pero No lo He Conseguido. Por Otro lado 


		<!--    En El td = Partidos, Recogera Los Datos de Los Divs Dentro De Los Botones, Y Esto Agregara Su Contenido A Su respectivo 
		<!--   td. Por Ejemplo Tengo Los <div class="name-team-option-1"> Barcelona </div>,  <div class="name-team-option-2">Real Madrid</div>
		<!--   En debajo de Partidos Se Obtendra solo En Contenido De Los Div, Entonces Quedaría Algo Así, Barcelona - Real madrdi


		<!-- en el td = 1  , Recogera El dato del Div <div class="name-value-option-1">2.65</div> E Igualmente Solo Mostrara El Contenido. 2,65
		<!--  en el td = x  , Recogera El dato del Div <div class="name-value-option-x">2.40</div> E Igualmente Solo Mostrara El Contenido. 2,40 
		<!-- en el td = 2 , Recogera El Dato del Div    <div class="name-value-option-2">2.80</div> E Igual Mostrara Solo El Contenido 2.80

		<!--La idea Es Que estos Queden Como Botones, Osea, El <button> No desaparezca del codigo. 

		<!-- otro evento Que tengo es Que En vez De data-data = Display ="None" quisiera Que Se eliminara Si Ya Llega A La Fecha Y Hora Acosrdada, para Que 
		<!-- El Código no Sea Tan Amplio Y Con Tanta Info Ay Guardada. 
	});
}
 
function construyeFecha(stringfecha) {
	var dia = parseInt(stringfecha.substring(0, 2));
	var mes = parseInt(stringfecha.substring(3, 5)) - 1;
	var anio = parseInt(stringfecha.substring(6, 10));
	var hora = parseInt(stringfecha.substring(11, 13));
	var minuto = parseInt(stringfecha.substring(14, 16));
	return new Date(anio, mes, dia, hora, minuto);
}
 
// 1) Agrego el manejador de eventos
window.addEventListener('load', ocultarPorFecha);
</script>

</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

<a href="#">Ocultar Tabla Si La Fecha Actual A Pasado La Fecha Asignada.</a>

Publicado por Luis Sabi (24 intervenciones) el 10/02/2017 06:46:04
Alejandro, he Intentado Dar Con Lo Que Quiero pero Aún No Lo Consigo. He Diseñado Esta Idea Pero Aparece True. Mira, Y Le Agradecería Me Colaborara Con esto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function ocultarPorFecha() {
	var fechaActual = new Date();
	// 2) RECUPERO TODOS LOS TR QUE TIENE LA CLASE .date-team
 
	var partidos = document.querySelectorAll('tr.date-team'); // => devuelve un NodeList
	partidos = Array.prototype.slice.call(partidos); // 3) Convierto el NodeList en un Array para poder recorrerlo
 
	// 4) Utilizo el metodo forEach para recorrer el array
	partidos.forEach(function(element, index) {
 
		var fechaInicioPartido = element.getAttribute('data-date'); // 5) obtengo la fecha del partido 
		fechaInicioPartido = construyeFecha(fechaInicioPartido); // 6) covierto la fecha con tu funcion
 
 
 if(fechaActual = fechaInicioPartido){
 
 
	var hoy = fechaInicioPartido == fechaActual;
 
 
	$('.Aquí').append(hoy);
		}
 
 
 
 
 
	});
}
 
 
function construyeFecha(stringfecha) {
	var dia = parseInt(stringfecha.substring(0, 2));
	var mes = parseInt(stringfecha.substring(3, 5)) - 1;
	var anio = parseInt(stringfecha.substring(6, 10));
	var hora = parseInt(stringfecha.substring(11, 13));
	var minuto = parseInt(stringfecha.substring(14, 16));
	return new Date(anio, mes, dia, hora, minuto);
}
 
// 1) Agrego el manejador de eventos
window.addEventListener('load', ocultarPorFecha);









Otro Que He Intentado es De Esta Forma.

1
2
3
if (fechaInicioPartido = fechaActual){
   $(element.data-date == fechaActual).appendTo('.Aquí');
}




Pero Ni Así, Le Agradecería Me Ayudara. :D Muchas Gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 477
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

<a href="#">Ocultar Tabla Si La Fecha Actual A Pasado La Fecha Asignada.</a>

Publicado por Alejandro (130 intervenciones) el 18/02/2017 14:07:29
Hola Luis intenta cambiar esta linea

1
2
3
if (fechaInicioPartido = fechaActual){
   $(element.data-date == fechaActual).appendTo('.Aquí');
}

por

1
2
3
if (fechaInicioPartido === fechaActual) {
   $(element.data-date == fechaActual).appendTo('.Aquí');
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

<a href="#">Ocultar Tabla Si La Fecha Actual A Pasado La Fecha Asignada.</a>

Publicado por Luis (24 intervenciones) el 27/02/2017 00:27:20
Ya Alejando Lo Pude solucionar, Mira. Solo Era Setear Las Horas.


1
2
3
4
5
6
7
8
fechaActual.setHours(0,0,0,0);
fechaInicioPartido.setHours(0,0,0,0);
 
if(fechaActual.getTime() == fechaInicioPartido.getTime()){
    $(element).css("background","#fff");
    $(element).clone().appendTo('.Aquí');
 
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

<a href="#">Ocultar Tabla Si La Fecha Actual A Pasado La Fecha Asignada.</a>

Publicado por Luis (24 intervenciones) el 27/02/2017 00:35:11
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/**

 * createList 
 * Crea los elementos de la lista de forma dinamica.
 * 
 * @return undefined
 */
function createList() {
	var ul = document.getElementById('menu-content');
 	var days = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'];
	for (var i = 0; i < 7; i++) {
		var template = "<li class='list__item'>" +
			"<a href='#' class='list__link' data-day='" + i + "'>" + days[i] + "</a>" +
			"</li>";
 
		// Agrego cada elemento LI al UL
		ul.innerHTML += template;
	}   }
 
/**
 * selectCurrentDay 
 * Selecciona el dia actual.
 * 
 * @return undefined
 */
function selectCurrentDay() {
	var now = new Date();
	var currentDay = (now.getDay() > 0) ? now.getDay() - 1 : now.getDay();
	var items = Array.prototype.slice.call(document.querySelectorAll('a.list__link'));
 
	items.forEach(function(element, index) {
		if (currentDay === parseInt(element.getAttribute('data-day'))) {
			element.classList.add('current-day'); // agrego la clase current-day 
			element.innerHTML = "Hoy";
		}
	});
}
 
(function(d) {
 	createList();
	selectCurrentDay();
 
})(document);




Recuerda Esto, Ps Hasta Ay Funciono Bien, Y Muchas Gracias por Esto.
Ahora Lo Que Quiero Es Combinar Los Dos Script Los De Obtener los Partidos Por Fecha y Lo Otro Que Quiero, Es Que Cada Día.
Lunes, Martes, Miercoles, Y demás Obtengan Los Partidos cuya Fecha Sea Igual Al Día,

Ejemplo.
Lunes (HOY) 20 feb. Martes 21 feb miercoles 22 feb

Brazil vs Alemania Bayer Munich vs Borussia Dortmund Juventus vs Napoles
Colombia vs Argentina Barcelona vs Atletico Madrid milan vs inter

Y Así Sucesivamente. Le Agradecería Me Ayudara Con esto Gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar