0

これは私の最後の質問の続きです。（答えてくれてありがとう）

onclickを使用して「varb」を増やし、右クリックして「var b」を減らします。これにより、「var max」も増減しますが、逆になります（「varb」を増やし、「var max」を減らします）。

私は2つの問題があります：

1）「varb」が最大10に増加すると、「var max」は40に減少しますが、「var b」をクリックすると、「var max」を減少させることはできませんが、「varb」自体は増加しません。

2）1と同じ修正である可能性がありますが、「var max」が最大値の50未満の数値の場合、最小値が0のときに「varb」または「varc」を減らすと「varmax」が増加します。

ですから、私の質問は、関数が最小/最大になっているときに関数が機能しないようにする方法ですが、変更しても機能し続ける方法だと思います。

私の機能：

var max=50;
function decrease(){
  max = Math.max(max-1,0);
  document.getElementById('boldstuff').innerHTML = max;
  if(max < 1){
    alert("There are no more skill points to be spent.");
  }
}
function increase(){
  max = Math.min(max+1,50);
  document.getElementById('boldstuff').innerHTML = max;
}

var b=0;
function increase1(){
  b = Math.min(b+1,10);
  document.getElementById('boldstuff2').innerHTML = +b;
  if(b > 9){
    alert("You have spent all the points you can in this skill.");
  }
}
function decrease1(){
  b = Math.max(b-1,0);
  document.getElementById('boldstuff2').innerHTML = +b;
}


var c=0;
function increase2(){
  c = Math.min(c+1,10);
  document.getElementById('boldstuff3').innerHTML = +c;
  if(c > 9){
    alert("You have spent all the points you can in this skill.");
  }
}
function decrease2(){
  c = Math.max(c-1,0);
  document.getElementById('boldstuff3').innerHTML = +c;
}

私のボタン：

 <div id='rem'>Remaining Skill Points: <b id="boldstuff">50</b></div>

 <div id='skill1'><input type="submit" class="skillbutton" onclick="decrease();increase1();" oncontextmenu="increase();decrease1();return false;"></div>
 <div id='counter1'><b id="boldstuff2">0</b></div>
 <div id='skill2'><input type="submit" class="skillbutton" onclick="decrease();increase2();" oncontextmenu="increase();decrease2();return false;"></div>
 <div id='counter2'><b id="boldstuff3">0</b></div>
4

1 に答える 1

0

ここには改善の余地がたくさんあります。しかし、あなたの主な関心事は、との目的について少し混乱していることだと思いMath.min()ますMath.max()。これらは、実際にはリミッターとして使用することを意図したものではありません（ただし、リミッターの作成には役立ちます）。代わりに、次のように、いくつかの比較を行うことを検討している可能性があります。

var max=50;
function decrease() { 
    if(max > 0) {
        max--; 
        document.getElementById('boldstuff').innerHTML = max;
    } else {
        alert("There are no more skill points to be spent.");
    }
}

function increase() {
    if(max < 50)
        max++; 
        document.getElementById('boldstuff').innerHTML = max;
    }
}

ただし、問題に対してよりオブジェクト指向のアプローチをとったほうがよいと思います。そうしないと、小さなバグを小さなバンドエイドで押しつぶそうとするときに、問題が発生する可能性が高くなります。次の「拡張」バージョンのコードを検討してください。

var SkillManager = (function() {
    var max = 50,
        skills = {
            skill1: {
                cur: 0,
                max: 10
            },
            skill2: {
                cur: 0,
                max: 10
            }
        },
        totalUsed = 0;

    var increase = function(skill) {
        if (totalUsed < max && skills[skill].cur < skills[skill].max) {
            skills[skill].cur++;
            totalUsed++;
            updateDisplay(skill, skills[skill].cur, max - totalUsed);
        } else if(skills[skill].cur === skills[skill].max) {
            alert("You have maxed out that skill!");
        } else {
            alert("You have used all your skill points!");
        }
    };

    var decrease = function(skill) {
        if (skills[skill].cur > 0) {
            skills[skill].cur--;
            totalUsed--;
            updateDisplay(skill, skills[skill].cur, max - totalUsed);
        } else {
            alert("You can't decrease a skill with 0 points in it!");
        }
    };

    var updateDisplay = function(skill, value, totalRemaining) {
        document.getElementById(skill + "counter").innerText = value;
        document.getElementById("remainingPoints").innerText = totalRemaining;
    };

    return {
        decrease: decrease,
        increase: increase
    };
}());​

（わずかに変更された）マークアップ：

<div id='rem'>Remaining Skill Points: <b id="remainingPoints">50</b></div>

<div id='skill1'>
     <input type="button" class="skillbutton" onclick="SkillManager.increase('skill1')" oncontextmenu="SkillManager.decrease('skill1'); return false;" value="S1" />
</div>
<div id='skill1counter' style="font-weight: bold">0</div>
<div id='skill2'>
    <input type="button" class="skillbutton" onclick="SkillManager.increase('skill2')" oncontextmenu="SkillManager.decrease('skill2'); return false;" value="S2" />
</div>
<div id='skill2counter' style="font-weight: bold">0</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

この設定はもう少しコードですが、スキルを追加すると、スキルごとに追加する必要のあるコードの量が大幅に減少することに気付くでしょう（この時点では、スキルごとに約2行のコードです）。また、スキル名の管理やオブジェクトを介したより多くのメタデータの提供など、拡張の余地がたくさんありskillsます。結局のところ、それはより効率的で、バグが発生しにくく、保守と拡張がはるかに簡単です。

ここで実際の動作を確認できます。

http://jsfiddle.net/uFrPQ/

PS-jQueryのようなDOM抽象化ライブラリを追加することを検討してください。これにより、ブラウザーの互換性を維持しながら、イベントハンドラーをマークアップから引き出すことができます。

于 2012-09-14T15:00:27.573 に答える