JavaScript - Una misma función para muchos elementos.

Una misma función para muchos elementos.

Publicado por Pedro (6 intervenciones) el 19/01/2020 16:26:37

Hola gente! Mi problema es el siguiente, este codigo solo funciona con dos determinados elementos asociados con su ID:

function hostia() {

  document.getElementById("hostia").classList.toggle("tshirt-down");

  document.getElementById("text").classList.toggle("show-text");

Y como hay muchos más divs con esos mismos elementos, no quiero tener que crear una función para cada uno de los divs si no crear una función llamando a todos los divs mediante GetElementsBy ClassName. Pero no sé cómo hacerlo ni se utilizar (this). en JavaScript. Estoy seguro de que es simple pero necesito vuestra ayuda. Gracias.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 41

Val: 42

Una misma función para muchos elementos.

Publicado por juan jose (18 intervenciones) el 19/01/2020 19:38:49

hay muchas formas de hacer las cosas, no se cual es la finalidad de lo que estas probando, si especificas para que y que es lo que quieres hacer es mas facil ayudar

cuando haces un getElementsByClassName lo que devuelve es un array de elementos, cada elemento ocupa una posicion del array

no hace falta, hacer una funcion para cada una, puedes hacer una funcion y pasarle parametros

<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title> hostia </title>

    <style>

        .hostia{

            background:greenyellow;

            color:black;

        .show-text{

            background:black;

            color:greenyellow;

    </style>

    <script>

        function hostia(elemento,claseNueva) {

            x=document.getElementsByClassName(elemento);

            for(i=0;i<x.length;i++){

                x[i].classList.toggle(claseNueva);

    </script>

</head>

<body>

    <div class ="hostia">aaaaa</div>

    <div class ="hostia">aaaaa</div>

    <div class ="hostia">aaaaa</div>

    <p onclick="hostia('hostia','show-text')" > click aqui</p>

</body>

</html>

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Una misma función para muchos elementos.

Publicado por Pedro (6 intervenciones) el 19/01/2020 20:58:19

Muchisimas gracias por responder pero no es eso exactamente a lo que me refiero.

Dejo el link de mi sitio para que podais ver: [url]oedpr.blank.international[/url]

Podeis desplazar de camiseta en camiseta arrastrando con el puntero o con las teclas del teclado izquierda y dereca para llegar a la tercera que es donde estoy probando el codigo.

En la tercera camiseta "hostia". Mediante css y la propiedad hover consigo esto. Con el código de arriba que anteriormente os he mostrado paso a hacerlo mediante javascript. Pero sólo soy capaz de hacerlo mediante ID. con lo cual tengo que usar un codigo para cada camiseta. Mi meta es hacer que un mismo código javascript sirva para todas las camisetas cuando se haga click en ellas.

Un saludo y gracias.

Valora esta respuesta

Comentar

Pos: 41

Val: 42

Una misma función para muchos elementos.

Publicado por juan jose (18 intervenciones) el 19/01/2020 22:56:24

</html>

<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title> hostia </title>

    <style>

        .hostia{

            background:greenyellow;

            color:black;

            width:100px;

            height:100px ;

            float:left;

        .show-text{

            background:black;

            color:greenyellow;

            width:100px;

            height:100px ;

            float:left;

    </style>

    <script>

        function hostia(z) {

            document.getElementById(z).classList.toggle("show-text");

    </script>

</head>

<body>

    <div id="uno" class ="hostia" onclick="hostia(event.target.id)">aaaaa</div>

    <div id="dos"class ="hostia" onclick="hostia(event.target.id)">aaaaa</div>

    <div class ="hostia">aaaaa</div>

</body>

</html>

con event.target.id tomas el nombre del id y lo pasas como parametro.

Valora esta respuesta

Comentar

Tengo problemas

Publicado por Pedro (6 intervenciones) el 28/01/2020 18:44:37

Buenas tardes Juan José. Ante todo, muchísimas gracias porque tras darle vueltas al coco conseguí implimentar tu código enla web que estoy construyendo pasito a pasito ( http://oedpr.blank.international/ ) y funciona casi a la perfección. El único fallo que he intentado solucionar y no sé por qué en sobremesa y portátiles funciona perfecto sólo que en móviles y dispositivos similares el primer elemento de la función no funciona.

Pensé que cambiando for(i=0;i<x.length;i++) por for(i=-1;i<x.length;i++) se resolvería pero o ese no es el dígito que debo utilizar o no sé que hago mal. Por qué el primer elemento no llama a la función? Y solo en ciertos dispositivos? Existe solución alguna?

Un saludo y gracias de antemano.

Valora esta respuesta

Comentar

Pos: 4

Val: 2.019

Una misma función para muchos elementos.

Publicado por ScriptShow (692 intervenciones) el 19/01/2020 20:44:15

Saludos Pedro,

veamos un ejemplo simple y adaptable casi sin límites...

<style type="text/css">

#todo a {width:240px;display:block;padding:24px;text-decoration:none;}

#todo div {width:240px;display:none;padding:24px;text-align:left;}

#todo div.focus {display:block;text-align:left;font-size:24px;}

:focus {outline:0;outline:none;}

</style>

<script type="text/javascript">

var p=null;

function test(e) {

if (p != null) document.getElementById(p).className="";

p=e;

document.getElementById(e).className="focus";

</script>

<div id="todo">

<a href="javascript:" onfocus="test(1)" tabindex="1">01</a>

<div id="1">Texto - 01</div>

<a href="javascript:" onfocus="test(2)" tabindex="2">02</a>

<div id="2">Texto - 02</div>

<a href="javascript:" onfocus="test(3)" tabindex="3">03</a>

<div id="3">Texto - 03</div>

<a href="javascript:" onfocus="test(4)" tabindex="4">04</a>

<div id="4">Texto - 04</div>

</div>

Espero sea útil.

Valora esta respuesta

Comentar

Pos: 4

Val: 2.019

Una misma función para muchos elementos.

Publicado por ScriptShow (692 intervenciones) el 20/01/2020 11:26:15

Saludos Pedro,

observo ideas interesantes, sencillas, adaptables, basadas en código nativo, etc.

Otro Script que permite ampliar "sin límites" añadiendo DIVs con la misma Class...

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title> hostia </title>

<style>

.hostia{

padding:24px;

font-size:12px;

color:lightblue;

background:lightblue;

display:inline-block;

transition:all .4s ease;

-webkit-transition:all .4s ease;

.show-text{

font-size:40px;

color:lightblue;

background:darkblue;

</style>

</head>

<body>

<div class="hostia">aaaa</div>

<div class="hostia">bbbb</div>

<div class="hostia">cccc</div>

<div class="hostia">dddd</div>

<script>

x=document.getElementsByClassName("hostia");

for(i=0;i<x.length;i++){

x[i].onclick=function(){this.classList.toggle("show-text");}

</script>

</body>

</html>

Espero sea útil.

Valora esta respuesta

Comentar

Ordenar numeros de un input con borbuja

Cambio de Divisas