0

Estoy tratando de cambiar el valor de una variable global llamada numerofinal después de haber hecho click en un div, para almacenarlo como valor de un array. Cuando hago click la variable numerofinal cambia, pero se queda allí dentro y no cambia dentro de la variable directorio.

var negro = $("#blacko");
var material = ['white', 'black', 'chrome'];
var numerofinal = 0;
 
negro.on("click", function() {
    numerofinal += 1;
});

var directorio = 'imgs/' + material[numerofinal] + '/image{frame}.png';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


Muchas gracias a todos por contestar tan rápido. Sois unos cracks. El problema es que no funciona ninguno de ellos como espero y es porque seguramente no me terminé de explicar correctamente. Esto de la variable directorio lo necesito para cambiar dinámicamente el parámetro source: de un objeto o plugin que uso para visualizar esa array de imágenes simulando un 360 view. Es un plugin que encontré en internet llamado spritespin. Vi como el autor cambiaba dinámicamente el número de imágenes de cada array y pensé utilizar ese plugin pero añadiendo más opciones. La idea es que al pulsar en un botón externo cambié toda la array de imágenes y muestre otro acabado del producto en 360 grados. Como estoy aprendiendo que no hay que repetirse a uno mismo, la idea sería cambiar dinámicamente la fuente o source: de donde vienen los conjuntos de imágenes diferentes.

Lo que proponéis cambia la variable directorio, pero no su valor no se adjunta dentro del objeto. Adjunto código:

//config directorio spritespin
    var negro = $("#blacko");
    var material = ['white', 'black', 'chrome'];
    var numerofinal = 0;


  negro.on("click", function() {
      numerofinal += 1;
    });

  function resultado() {
      directorio = 'imgs/' + material[numerofinal] + '/image{frame}.png';
  }

actualizarDirectorio();



  $('.spritespin').spritespin({

    // generate an array of image urls.
    // this is a helper function that takes a {frame} placeholder
    source: SpriteSpin.sourceArray(directorio, {
      // this ramge of numbers is interpolated into the {frame} placeholder
      frame: [001,050],
      // the frame placeholder will be padded with leading '0' up to the number of 'digits'
      digits: 3
    }),
    // this is a helper function that takes a {frame} placeholder
  /*  source: SpriteSpin.sourceArray('imgs/mix/image{frame}.png', {
      // this ramge of numbers is interpolated into the {frame} placeholder
      frame: [001,050],
      // the frame placeholder will be padded with leading '0' up to the number of 'digits'
      digits: 3
    }),*/
    // Specify the display width and height of the frame.
    // Optionally the size of the container can be defined with CSS.
    width: 500,
    height: 500,
    // Sense controls the direction and speed of the animation for mouse/touch interactions.
    // Here a negative value is chosen to invert the rotation, so the animation 'follows' the drag direction.
    // Values towards 0 will slow the animation down.
    sense: -1,
    animate: true,
    responsive: true,
    loop: false,
    frameTime: 50,
  }); //end spritespin

1
  • Necesitas mover tu variable directorio adentro de la función.
    – Yikarus
    Commented el 5 may. 2017 a las 14:56

3 respuestas 3

3

El problema es que la variable "directorio" se asigna al ejecutar el JavaScript, no en cada click. Para eso deberías cambiarlo en cada click, algo así:

var negro = $("#blacko");
var material = ['white', 'black', 'chrome'];
var numerofinal = 0;
var directorio;

negro.on("click", function() {
    numerofinal++;
    actualizarDirectorio();
});

function actualizarDirectorio() {
  directorio = 'imgs/' + material[numerofinal] + '/image{frame}.png';
}

actualizarDirectorio();
2
  • Hola. Muchas gracias a todos por contestar tan rápido. Sois unos cracks.
    – Tono Arnau
    Commented el 6 may. 2017 a las 10:54
  • Stack Snippet sólo debe usarse en código ejecutable. A este código le falta el HTML y cargar jQuery para ser ejecutable.
    – Rubén
    Commented el 15 jul. 2019 a las 20:22
1

El código tal como lo planteas no hace lo que tu quieres.

Primeramente debes colocar la variable directorio dentro de una función e invocarla en el momento que quieras trabajar con la variable directorio, (en dicha función si podrás hacer lo que planteas).

Ahora no necesariamente tienes que hacer de Directorio una variable Global, eso dependerá de si quieres usarla en otras funciones o no, para ello bastara con anteceder a directorio con la palabra var y pasara a ser una variable Local, en cambio si no antecedes la variable con la palabra var esta pasara a ser una variable Global.

Ejemplo:

var negro = $("#blacko");
var material = ['white', 'black', 'chrome'];
var numerofinal = 0;
 
negro.on("click", function() {
    numerofinal += 1;
});

function resultado() {

    // Ejemplo de variable Global.
        directorio = 'imgs/' + material[numerofinal] + '/image{frame}.png';

    // Ejemplo de variable Local.
    var directorio = 'imgs/' + material[numerofinal] + '/image{frame}.png';

document.getElementById("directorio").innerText=directorio;

document.getElementById("numerofinal").innerText=numerofinal;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="blacko">haz click</button>
<button onclick="resultado();">Resultado</button>
<br>
<br>numero final:<div id="numerofinal"></div>
<br>directorio:<div id="directorio"></div>

0

Otra alternativa es hacer todo el proceso dentro del click depende de tu necesidad.

var negro = $("#blacko");
var material = ['white', 'black', 'chrome'];
var numerofinal = 0;

negro.on("click", function() {
    numerofinal += 1;
    var directorio = 'imgs/' + material[numerofinal] + '/image{frame}.png';
});
1
  • En este caso directorio solo esta accesible dentro de la funcion usada en on click. Habria que hacer var directorio afuera en el espacio global y luego solo directorio = ... dentro del on click. Commented el 5 may. 2017 a las 17:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.