0

選択項目のオプションが選択されたときにいくつかの変数値を変更するjQuery関数を作成しようとしました（オプションが選択されている場合は特定の値を追加し、オプションが選択されていない場合はその値を減算します）が、非常に値を加算および減算します奇妙な方法。これが私がjavascript用に書いたコードです（チェックボックスで動作していた以前のコードから適応されました）：

var pds1=0;
var pds2=0;
var pds3=0;
var pdstot=0;

$(document).ready(function() {
  $('#perk1').html(pds1);
  $('#perk2').html(pds2);
  $('#perk3').html(pds3);
  $('#perktot').html(pdstot);

  $("#blabla").change(
    function() {
      if ($("option#5:selected").length)
      {
        pds1=pds1+10;
        pdstot=pdstot+10;
      }
      else if(pds1>0)
      {
        pds1=pds1-10;
        pdstot=pdstot-10;
      }

      if ($("option#3:selected").length)
      {
        pds2=pds2+10;
        pdstot=pdstot+10;
      }
      else if(pds2>0)
      {
        pds2=pds2-10;
        pdstot=pdstot-10;
      }

      if ($("option#4:selected").length)
      {
        pds3=pds3+10;
        pdstot=pdstot+10;
      }
      else if(pds3>0)
      {
        pds3=pds3-10;
        pdstot=pdstot-10;
      }
      //option 6 adds 10 to variable pds1 and pds2
      if ($("option#6:selected").length)
      {
        pds1=pds1+10;
        pds2=pds2+10;
        pdstot=pdstot+10;
      }
      else if(pds1>0)
      {
        pds1=pds1-10;
        pds2=pds2-10;
        pdstot=pdstot+10;
      }

      $('#perk1').html(pds1);
      $('#perk2').html(pds2);
      $('#perk3').html(pds3);
      $('#perktot').html(pdstot);
    });
});

これがhtmlです

<select id='blabla' multiple='multiple'>
<option id='5'>Name5</option>
<option id='3'>Name3</option>
<option id='4'>Name4</option>
<option id='6'>Name6</option>
</select>

<span id="perk1"></span>
<span id="perk2"></span>
<span id="perk3"></span>
<span id="perk4"></span>

この関数が変数をどのように処理しているかを誰かに説明してもらえますか？奇妙な動作の例：オプション5をクリックしても、pds1に10が追加されるのではなく、pds2に10が追加されます。代わりに私がしたいのは、pds1に10を追加し、pds2には何もしないことです。問題は、この場合、「option＃6：selected」の下の「elseif」にあると思いますが、なぜですか？そして、それだけが奇妙な振る舞いではありません。

4

1 に答える 1

1

なぜ結果が得られるのかは簡単にわかります。現在のコードと #5 の例を使用して、各ifステートメントについて説明します。#5 が選択されているためpds1、10 が加算されます。#6 が選択されておらず、pds1 が #5elseだけ増加したため、pds1 に追加されたものを減算します。

毎回変数をゼロにリセットし、必要なものだけを追加するだけで、このロジック全体を単純化できます。

/* utilty function to avoid repeated lines */
function showValues(pds1, pds2, pds3) {

    var pdstot = pds1 + pds2 + pds3
    $('#perk1').html(pds1);
    $('#perk2').html(pds2);
    $('#perk3').html(pds3);
    $('#perk4').html(pdstot);
}

$(document).ready(function() {
    showValues(0, 0, 0);

    $("#blabla").change(

    function() {
        var num_selected = $(this).find(':selected').length;

        var pds1 = 0;
        var pds2 = 0;
        var pds3 = 0;                     

        if ($("option#5:selected").length) {
            pds1 = pds1 + 10;
        }    
        if ($("option#3:selected").length) {
            pds2 = pds2 + 10;
        }    

        if ($("option#4:selected").length) {
            pds3 = pds3 + 10;
        }

        //option 6 adds 10 to variable pds1 and pds2
        if ($("option#6:selected").length) {
            pds1 = pds1 + 10;
            pds2 = pds2 + 10;    
        }

        showValues(pds1, pds2, pds3);

    });
});

デモ: http://jsfiddle.net/f9UEC/

于 2012-10-07T23:00:01.340 に答える