0

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

我使用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 的任何数字时，减小 'var b' 或 'var c' 当它们的最小值为 0 时，'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>
4

1 回答 1

0

这里有很大的改进空间。Math.min()但我认为您主要担心的是您对and的目的有点困惑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 - 您可能会考虑添加一个 DOM 抽象库，如 jQuery。它将允许您从标记中提取事件处理程序，同时保持浏览器兼容性。

于 2012-09-14T15:00:27.573 回答