(Consulta) Como mejorar esto?

opzina · #1 (**permalink**) 17/08/2011, 13:38

Hola a todos,
Hice este sencillo codigo para cambiar el atributo src de las imagenes.

Como podria mejorarlo, optimizarlo, simplificarlo?

Código Javascript:

Ver original$(document).ready( function() {
 
var $hipodromo     = "hipodromo";
var $rio           = "rio";
var $catedral      = "catedral";
var $restaurant = "restaurante";
var $comercial     = "zona_comercial";
var $tren         = "tren";
var $salud         = "salud";
var $ruta        = "panamericana";
var $maps         = "mapa";
var $shopping    = "shopping";
 
var $path        = "images/barrio/";
var $ext        = ".jpg";
 
var $img         = "#coleccion img";
 
    $(".opt").click( function() {
        
        if ("#rio") {
            $($img).change().attr({ src: $path + $rio + $ext }); 
        } else if ("#resto") {
            $($img).change().attr({ src: $path + $restaurant + $ext });
        } else if ("#tren") {
            $($img).change().attr({ src: $path + $tren + $ext });
        } else if ("#ruta") {
            $($img).change().attr({ src: $path + $ruta + $ext });
        } else if ("#shopping") {
            $($img).change().attr({ src: $path + $shopping + $ext });
        } else if ("#hipodromo") {
            $($img).change().attr({ src: $path + $hipodromo + $ext });
        } else if ("#catedral") {
            $($img).change().attr({ src: $path + $catedral + $ext });
        } else if ("#comercial") {
            $($img).change().attr({ src: $path + $comercial + $ext });
        } else if ("#salud") {
            $($img).change().attr({ src: $path + $salud + $ext });
        } else {
            $($img).change().attr({ src: $path + $maps + $ext });
        }
 
    });
 
            
});

Gracias.

opzina · #2 (**permalink**) 18/08/2011, 08:27

Hice estos cambios pero no he logrado que cumpla su objetivo.

Código Javascript:

Ver original$(document).ready( function() {
 
    var $barrio_path        = "images/barrio/";
 
    var $barrio =  [
            "hipodromo", 
            "rio",
            "catedral",
            "restaurante",
            "zona_comercial",
            "tren",
            "salud",
            "panamericana",
            "mapa",
            "shopping"
        ];
 
 
    var $amenity_path = "images/amenity/";
    var $amenity =  [
            "pileta",
            "gim",
            "parque",
            "internet",
            "solarium",
            "microcine",
            "guarderia",
            "seguridad",
            "sum",
            "sauna",
            "parking",
            "tv",
            "laundry",
            "juegos",
            "cocheras",
            "vestuario"
        ];
 
    var $ext        = ".jpg";
    var $img         = "#coleccion img";    
 
 
var $barrio_path  = "images/barrio/";
var $amenity_path = "images/amenity/";
 
var $ext        = ".jpg";
var $img         = "#coleccion img";
 
 
    $(".opt").click( function() {
        
        for(var $i = 0; $i < $barrio.lenght; $i++) {
            if ($barrio[$i]) { $($img).change().attr({ src: $barrio_path + $barrio[$i] + $ext }); }
            break;
        }
        
    });
 
            
});

Dany_s · #3 (**permalink**) 18/08/2011, 08:46

podés colocar el nombre como atributo

Código HTML:

Ver original<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>
    $( function() {
        $('#opt li').click( function(){
            $('#msg').text('images/barrio/'+$(this).attr('data-opt')+'.jpg');
        });
    });
    </script>
 
</head>
<body>
 
<ul id="opt">
    <li data-opt="rio">Opción rio</li>
    <li data-opt="resto">Opción resto</li>
    <li data-opt="tren">Opción tren</li>
    <li data-opt="ruta">Opción ruta</li>
    <li data-opt="shopping">Opción shopping</li>
</ul>
<div id="msg"></div>
</body>
</html>

también podrias recuperar el id si es igual al nombre de la imagen pero no sé si te convendria