Question

这是我上一个问题的延续。（感谢答案）

我使用onclick增加并右键单击减少'var b'这也导致'var max'增加/减少但相反（增加'var b'，减少'var max'）

我有两个问题：

1）当'var b'增加到最大值10时，'var max'减少到40但是当点击'var b'时，我仍然可以减少'var max'，'var b'本身并没有增加虽然。

2）可能与1相同，但是，当'var max'是低于其最大值50的任何数字时，当它们的最小值为0时，减小'var b'或'var c''var max'是增加'

所以我想我的问题是如何在函数处于最小值/最大值时停止工作，但在更改后仍然可以继续工作。

我的职能：

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>

Answer 1

这里有很大的改进空间。但我认为你主要担心的是你对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>

这个设置稍微多一些代码，但是当你添加技能时，你会注意到你必须为每个技能添加的代码量下降（此时，每个技能大约有两行代码）。此外，还有很多扩展空间，例如管理技能名称和通过skills对象提供更多元数据。当涉及到它时，它更有效，更容易出错，并且更容易维护和扩展。

你可以在这里看到它：

http://jsfiddle.net/uFrPQ/

PS - 您可以考虑添加像jQuery这样的DOM抽象库。它允许您在保持浏览器兼容性的同时将事件处理程序从标记中拉出来。

达到最小值/最大值时停止功能

1 个答案: