Question

我尝试编写一些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不会将10添加到pds1，而是将10减去pds2;我想要发生的事情是将pds1添加10并且不对pds2做任何事情。我想这个问题，在这种情况下，它是在＆＃34;否则如果＆＃34;在＆＃34;选项＃6：选择＆＃34;，但为什么？而且这不是唯一奇怪的行为。

Answer 1

很容易理解为什么你会得到你得到的结果。使用当前代码和＃5示例遍历每个if语句。选择＃5后，pds1会增加10。由于未选择＃6且pds1增加了＃5，else减去刚刚添加到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);

    });
});

DEMO：http://jsfiddle.net/f9UEC/

在select change函数中使用jQuery处理选项变量

1 个答案: