Question

我正在尝试创建一个按钮，当点击该按钮时，会按顺序循环播放三个不同的值：“排除”，“包含”和“不确定”。我能够创建一个简单的按钮，使用以下内容切换值：

function valChange()      {
 document.myForm.myButton.value="Value has changed"
}

但是，一旦我在其中放置一些if ... else逻辑来处理这三个值，它在第一次点击时仍然会发生变化，但在后续点击时却不会发生变化。有人有主意吗？我正在使用javascript和coldfusion，所以如果有一种方法可以使用CFC，甚至jQuery轻松实现这一点，我愿意接受它。

提前致谢。

Answer 1

这里的关键字是三态，谷歌就是这样，你会找到很多好的资源。例如this website。

我刚刚做了这个简单的例子，没有使用任何全局变量：

// Wrap variables that shouldn't be globals in a self-executing function
document.getElementById('element').onclick = (function(){

    var i = 0;
    var states= ['first', 'second', 'third'];

    return function(){
        // Increment the counter, but don't let it exceed the maximum index
        i = ++i%states.length; 
        this.value = states[i];
    };

})();

Answer 2

您已拥有的代码涵盖了您需要的常规功能，即将按钮的值设置为特定字符串。

您正在查看的扩展是将此字符串的值更改为三个值之一的问题。第一步可能是看看你如何能够改变一个以上的值（不一定是包装）。这可以通过数组以简单的方式完成，如下所示：

var labels = [ "Initial", "Value has changed", "Value changed again" ];
var index = 0;

function valChange() {
  index++;
  document.myForm.myButton.value = labels[index];
}

这对于最多两次点击非常有用，但它超越了这一点，因为你超越了数组的末尾。然后，获得完整循环模式的技巧是，一旦超过结束，将计数器重置为零，从而有效地使您的数组循环：

function valChange() {
  index++;
  if (index == labels.length) {
    index = 0;
  }
  document.myForm.myButton.value = labels[index];
}

瞧！每次调用valChange函数时，索引都会递增，因此 next 标签将不同，并且它会根据需要处理循环约束。

请注意，此实现不会严格查看标签的当前值;相反，它通过index计数器维护自己的状态版本。如果你知道这个方法是修改标签的唯一方法，这可以说更简单，更清晰。但是，如果标签可能被外部代码任意更改为不同的值，您可能希望通过获取按钮的当前标签并依次将其与每个数组元素进行比较来动态计算索引。这种情况较慢，有点笨拙，但在外部修改时更加强大。

Answer 3

您也可以这样做。这一切都取决于您想要的灵活性/可扩展性。

这里我们将值存储在一个对象中，因此我们可以看到：给定一个当前状态，我们应该转换到。

如果您要添加更多状态，显然不是最佳解决方案，但如果状态因某些原因不会“循环”，则可能会有用。

function valChange() {
    /* Transition states */
    var transitions = {
        /* When value is 'Initial', it will be changed to 'Value has changed' */
        'Initial': 'Value has changed', 
        /* When value is 'Value has changed' it will be changed to 'Value has changed again' */
        'Value has changed': 'Value has changed again',
        /* etc */
        'Value has changed again': 'Initial' 
    };

    var currentValue = document.myForm.myButton.value;

    document.myForm.myButton.value = transitions[currentValue];   
}

需要一个在三个值之间循环的切换按钮

3 个答案: