onChange non cambia attributo data

[claudia_c82]

Buongiorno a tutti,
mi sono arenata in un piccolo problema

devo creare un magazzino con dei prodotti suddivisi per taglie e per ognuna devo dare una disponibilità max, quindi ho fatto così....

<select name="select" class="item_size">
  <option selected="selected" value="">--</option>
  <option value="44 - 45" data-qty="2">44 - 45</option>
  <option value="36 - 37" data-qty="3">36 - 37</option>
  <option value="42 - 43" data-qty="4">42 - 43</option>
</select>
<p>--</p>
<div class="decrement_qty" data-min="0"><a href="javascript:;">-</a></div>
<div class="item_quantity">0</div>
<div class="increment_qty" data-max="0"><a href="javascript:;">+</a></div>

e questo è JS

$('.item_size').change(function() {
      var dataMax = $(this).find(":selected").data("qty");
      $(".item_quantity").text('1');
      $(".increment_qty").attr("data-max", dataMax);
      $(".decrement_qty").attr("data-min", '1');
    });

    $('.increment_qty').click(function() {
        if ($('.item_size').val() != "") {
            var oldVal = $(this).parent().find(".item_quantity").text();
            if ( parseFloat(oldVal) < $(this).data("max") ) {
                var newVal = parseFloat(oldVal) + 1;
                $(this).parent().find(".item_quantity").text(newVal);
            }
        } 
        else {
           alert("Seleziona una taglia");
        }
    });
    $('.decrement_qty').click(function() {
        if ($('.item_size').val() != "") {
            var oldVal = $(this).parent().find(".item_quantity").text();
            if ( parseFloat(oldVal) > $(this).data("min") ) {
                var newVal = parseFloat(oldVal) - 1;
                $(this).parent().find(".item_quantity").text(newVal);
            }
        } 
        else {
           alert("Seleziona una taglia");
        }
    });

Alla prima scelta mi setta il parametro "data-max" perfettamente, se cambio taglia il valore di data-max rimane il primo scelto, eppure se faccio un alert(dataMax); prende correttamente il valore di data-qty

Quale potrebbe essere il problema?

Grazie in anticipo

[claudia_c82]

nessuno?!

[cavicchiandrea]

Vedo che usi le classi per selezionare gli elementi ma sono univoche per capirci item_size è unica o ripetuta per X elementi select?

[bstefano79]

così

 var dataMax =0;
   $('.item_size').change(function() {
   // alert('pippo12');
      dataMax = $(this).find(":selected").data("qty");
      $(".item_quantity").text('1');
      $(".increment_qty").attr("data-max", dataMax);
      $(".decrement_qty").attr("data-min", '1');
    });


    $('.increment_qty').click(function() {
        if ($('.item_size').val() != "") {
			alert(dataMax);
            var oldVal = $(this).parent().find(".item_quantity").text();
            if ( parseFloat(oldVal) < dataMax ) {
                var newVal = parseFloat(oldVal) + 1;
                $(this).parent().find(".item_quantity").text(newVal);
            }
        } 
        else {
           alert("Seleziona una taglia");
        }
    });
    $('.decrement_qty').click(function() {
        if ($('.item_size').val() != "") {
            var oldVal = $(this).parent().find(".item_quantity").text();
            if ( parseFloat(oldVal) > $(this).data("min") ) {
                var newVal = parseFloat(oldVal) - 1;
                $(this).parent().find(".item_quantity").text(newVal);
            }
        } 
        else {
           alert("Seleziona una taglia");
        }
    });

[claudia_c82]

Buongiorno e grazie per le risposte... allora...

la classe item_size è univoca, ed è solo nel select

<select name="select" class="item_size">
  <option selected="selected" value="">--</option>
  <option value="44 - 45" data-qty="2">44 - 45</option>
  <option value="36 - 37" data-qty="3">36 - 37</option>
  <option value="42 - 43" data-qty="4">42 - 43</option>
</select>

Se metto if ( parseFloat(oldVal) < dataMax ) {
nel codice di incremento, mi resetta dataMax a 0 e quindi incrementa sempre a 1

[claudia_c82]

Buongiorno e grazie per le risposte... allora...

la classe item_size è univoca, ed è solo nel select

<select name="select" class="item_size">
  <option selected="selected" value="">--</option>
  <option value="44 - 45" data-qty="2">44 - 45</option>
  <option value="36 - 37" data-qty="3">36 - 37</option>
  <option value="42 - 43" data-qty="4">42 - 43</option>
</select>

Se metto if ( parseFloat(oldVal) < dataMax ) {
nel codice di incremento, mi resetta dataMax a 0 e quindi incrementa sempre a 1

[luca200]

E' sbagliato l'approccio: non devi usare l'attributo "data-max" per gestire quel dato.
In realtà il valore di data-max viene impostato correttamente ogni volta (lo puoi verificare dalla console del browser). Il problema è che tu, per gestire i limiti, utilizzi il data storage di jQuery attraverso la chiamata a data('max'). Questa chiamata legge il valore dell'attributo solo la prima volta, dopodiché se lo salva in memoria e le volte successive lo va a cercare direttamente lì. Per questo ti rimane sempre il primo valore.
In sostanza, devi cambiare il modo in cui memorizzi i dati, lavorando direttamente sul data storage

$('.item_size').change(function(){
      var dataMax = $(this).find(":selected").data("qty");
      $(".item_quantity").text('1');
      $(".increment_qty").data("max", dataMax);
      $(".decrement_qty").data("min",'1');
    });

Ne consegue che data-min e data-max sono superflui

[claudia_c82]

ma con il comando .change() non dovrebbe eseguire il codice dentro le {}?!
di conseguenza, non dovrebbe resettare data("max")?!

[luca200]

Non ho capito la domanda.
E da come ti esprimi mi sa che non hai le idee molto chiare su come funziona javascript

[claudia_c82]

provo a spiegarmi....

quando cambio la scelta con <select> e scelgo un'altra opzione, nel codice è presente "data-qty" che sarebbe la disponibilità massima del prodotto....

nel JS c'è la funzione .change(function) {}
ad ogni cambio dovrebbe eseguire il codice all'interno delle {}, no?!
quindi io pensavo che dataMax andasse a riprendere il valore di data-qty
var dataMax = $(this).find(":selected").data("qty");


è qui che sbaglio?