Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JQuery » Ocultar clase de un div

JQuery - Ocultar clase de un div

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Ocultar clase de un div

Publicado por Belén (2 intervenciones) el 03/12/2015 17:14:18
Buenas tardes, estoy empezando con Jquery y necesito un poco de ayuda.
Estoy haciendo el juego de hundir la flota y lo que necesito es que al crear los div, me oculte la clase de cada uno, pero no los div. Usé $(.nombreDeLaClase).hide();, pero con esto me lo oculta todo.

Les dejo el código a ver si me pueden ayudar. 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
<!DOCTYPE HTML>
<html lang="">
<head>
    <meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/estilo.css">
</head>
 
<style>
    .barco{
        background-image: url(img/barcoR.jpg);
        background-repeat:no-repeat;
 
    }
 
     .agua{
        background-image: url(img/marR.jpg);
        background-repeat:no-repeat;
    }
 
</style>
 
<script src="jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
 
    //Creo los DIV en #contenedor

 
    for (i=0;i<25;i++){
        var capa = $("<div></div>")
            .addClass("agua");
            //$(".agua").hide();

            $("#contenedor").append(capa);
    }
 
    while ($(".barco").length < 5){
          var posicion  = Math.floor((Math.random()* 25) + 1);
 
        if(!($("#contenedor div").eq(posicion).hasClass("barco"))){
            $("#contenedor").find("div").eq(posicion).removeClass("agua");
            $("#contenedor").find("div").eq(posicion).addClass("barco");
        }
    }
 
//AQUÍ ES DONDE QUIERO OCULTAR LAS CLASES, INTENTABA $(.barco).hide();, PERO NO FUNCIONA

 
/* ESTA ES LA PARTE QUE VOY A USAR PARA MOSTRAR LAS CLASES 

        $("#contenedor").find("div").on("click", function(){  

            if($(this).hasClass("barco")){

                $(this).show(".barco");

            }else{

                $(this).show(".agua");

            }

*/
        });
 
}); //Cierra script principal

</script>
 
<body>
    <div id="parteArriba"></div>
    <div id="parteIzq"></div>
    <div id="contenedor"></div>
 
</body>
</html>
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 xve
Val: 302
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Ocultar clase de un div

Publicado por xve (673 intervenciones) el 03/12/2015 21:06:00
Hola Belén, no se si te he entendido correctamente... pero al probar tu código, veo que generas un evento click cuando se pulsa sobre un div dentro del contenedor, pero tu contenedor, tiene una altura de 0px, por lo que es imposible pulsar sobre uno de sus divs... por lo que el evento click no se ejecuta nunca...

Exactamente que quieres haga?
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 clase de un div

Publicado por Belén (2 intervenciones) el 04/12/2015 10:42:36
Hola xve, quité parte del estilo por eso no sale esa parte. Lo que quería hacer exactamente, es dar una clase a unos divs y ocultar la clase hasta que se pinchara en uno de esos divs, pero luego leyendo llegué a la conclusión que la clase en si no se puede ocultar porque la clase es una forma de llamar a los divs para ocultar dicho div.

Por lo que lo hice de otra manera. Les dejo el código de como lo resolví finalmente (aunque aun no está acabado). Gracias por contestar.


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
<!DOCTYPE HTML>
<html lang="">
<head>
    <meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/estilo.css">
</head>
 
<style>
    #contenedor{

        border: solid 1px black;
        width: 210px;
        height: 208px;
        margin-bottom: 5%;
        margin-left:11%;
        position: absolute;
    }
 
     #contenedor div{

        float: left;
        width: 40px;
        height: 40px;
        border: solid 1px black;
        }
 
    #parteArriba{

        width: 249px;
        height: 40px;
        margin-left: 104px;
        border-top: solid 1px black;
        border-right: solid 1px black;
        border-left: solid 1px black;
    }
 
    #parteArriba div{

        width: 41px;
        height: 40px;
        float: left;
        text-align: center;
    }
 
    #parteIzq{

        width: 40px;
        height: 210px;
        margin-left: 104px;
        position: absolute;
        border-bottom: 1px solid black;
        border-left: 1px solid black;
    }
 
     #parteIzq div{

        width: 40px;
        height: 42px;
        text-align: center;
    }
 
    .colorLaterales{
        background-color: gray;
    }
 
    .barcoB{
        background-image: url(img/barcoB.jpg);
        background-repeat:no-repeat;
 
    }
 
    .barco{
        background-image: url(img/barcoR.jpg);
        background-repeat:no-repeat;
 
    }
 
     .aguaB{
        background-image: url(img/aguaB.jpg);
        background-repeat:no-repeat;
    }
 
    .agua{
        background-image: url(img/marR.jpg);
        background-repeat:no-repeat;
    }
 
 
</style>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
 
 
    //div invisibles parte de arriba

    var capa = "<div></div>";
        for (i=0;i<6;i++){
            $("#parteArriba").append(capa); //para añadir las capas

        }
    //div invisibles parte de izquierda

    var capa = "<div></div>";
        for (i=0;i<5;i++){
            $("#parteIzq").append(capa); //para añadir las capas

        }
 
    //Pinto los números

    for (i=1;i<=5;i++){
    $("#parteArriba").find("div").eq(i).text(i);
    }
 
    //Pinto las letras

    $("#parteIzq").find("div").first().text("A");
    $("#parteIzq").find("div").eq(1).text("B");
    $("#parteIzq").find("div").eq(2).text("C");
    $("#parteIzq").find("div").eq(3).text("D");
    $("#parteIzq").find("div").eq(4).text("E");
    $("#parteIzq").find("div").eq(4).text("F");
 
    $("#parteArriba").find("div").addClass("colorLaterales");
    $("#parteIzq").find("div").addClass("colorLaterales");
 
    //Crear DIV en contenedor

    //var posicionRandom = Math.floor((Math.random()* ) + );

 
 
 
    for (i=0;i<25;i++){
        var capa = $("<div></div>")
            .addClass("aguaB");
            //$(".agua").hide();

            $("#contenedor").append(capa);
    }
 
    while ($(".barcoB").length < 5){
          var posicion  = Math.floor((Math.random()* 25) + 1);
 
        if(!($("#contenedor div").eq(posicion).hasClass("barcoB"))){
            $("#contenedor").find("div").eq(posicion).removeClass("aguaB");
            $("#contenedor").find("div").eq(posicion).addClass("barcoB");
        }
    }
 
 
       $("#contenedor").find("div").on("click", function(){
         if ($(".barco").length < 5){
 
           if($(this).hasClass("barcoB")){
              $(this).removeClass();
              $(this).addClass("barco");
            }
 
           if($(this).hasClass("aguaB")){
              $(this).removeClass();
              $(this).addClass("agua");
            }
         }else{
            $("#contenedor").remove();
 
         }
 
 
       })
 
 
}); //Cierra script principal

</script>
 
<body>
    <div id="parteArriba"></div>
    <div id="parteIzq"></div>
    <div id="contenedor"></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
1
Comentar
Imágen de perfil de xve
Val: 302
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Ocultar clase de un div

Publicado por xve (673 intervenciones) el 04/12/2015 16:48:36
Gracias por compartirlo Belén!!!
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 clase de un div

Publicado por Jo (1 intervención) el 17/12/2017 15:41:11
Hola podrias subir el codigo para tenerlo de base
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