JQuery - Cambiando estilos con una funcion

 
Vista:
sin imagen de perfil
Val: 3
Ha disminuido su posición en 23 puestos en JQuery (en relación al último mes)
Gráfica de JQuery

Cambiando estilos con una funcion

Publicado por Daniel (2 intervenciones) el 26/10/2018 05:42:21
Hola amigos, tengo una duda, tengo este codigo bien sencillo aqui, tres cuadros cada uno representando un color, la idea es que cuando de click al color el text cambie al color del cuadro que clickie, pero en lugar de hacerlo con una funcion por cada division queria saber si puedo hacerlo todo con una sola funcion.
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: 347
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Cambiando estilos con una funcion

Publicado por xve (673 intervenciones) el 26/10/2018 08:07:52
Hola Daniel, si que se puede...

Yo lo he hecho creando una clase para cada color, y al pasar por encima, añado dicha clase al elemento para que cambie el color del texto..

No se si es esto exactamente lo que quieres

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
<!DOCTYPE html utf-8>
<html>
<head>
	<title>First Html</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 
<style type="text/css">
	.color{
		width: 80px;
		height: 80px;
		margin: 10px;
		display: flex;
		flex-direction: row;
		color: white;
	}
 
    #contenedor{
    	display: flex;
    }
 
    #rojo{background-color: red;}
    #azul{background-color: blue;}
    #amarillo{background-color: yellow;}
    #naranja{background-color: orange;}
 
    .rojo {color: red;}
    .azul {color: blue;}
    .amarillo {color: yellow;}
    .naranja {color: orange;}
</style>
 
 
</head>
<body>
  <h1>This is my First webpage</h1>
<div id="contenedor">
 <div class="color" id="rojo">rojo</div>
 <div class="color" id="azul">azul</div>
 <div class="color" id="amarillo">amarillo</div>
 <div class="color" id="naranja">naranja</div>
</div>
 
<p>My name is Daniel, and I am from Honduras</p>
<div class="container">
 
 
 
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 
 
</body>
<script type="text/javascript">
$(document).ready(function(){
    $(".color").mouseenter(function(e){
    	$(".container").html(e.target.innerHTML);
    	$(this).addClass(e.target.innerHTML);
    })
});
 
</script>
</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
Val: 3
Ha disminuido su posición en 23 puestos en JQuery (en relación al último mes)
Gráfica de JQuery

Cambiando estilos con una funcion

Publicado por Daniel (2 intervenciones) el 28/10/2018 21:03:36
queria cambiar el font color de las p, dependiendo del color de los cuadros, pero lo que hiciste fue muy interesante, podrias explicarme el codigo que no lo entiendo bien, no soy un experto en el tema, porfa.
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