Нужна кнопка переключения между тремя значениями - PullRequest
Новая
       6

Нужна кнопка переключения между тремя значениями

2 голосов
/ 05 ноября 2010

Я пытаюсь создать кнопку, которая при нажатии будет циклически вызывать тошноту по трем различным значениям: «Исключено», «Включено» и «Не уверен» в указанном порядке. Я могу создать простую кнопку, которая переключает значения один раз, используя что-то вроде этого: 

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

Однако, как только я добавлю некоторую логику if ... else для обработки трех значений, она все равно изменится при первом щелчке, но не при последующих щелчках. У кого-нибудь есть идеи? Я использую javascript и coldfusion, поэтому, если есть способ сделать это легко с помощью CFC или даже jQuery, я открыт для этого.

Заранее спасибо.

Ответы [ 3 ]

10 голосов
/ 05 ноября 2010

Ключевое слово здесь состоит из трех состояний, Google, и вы найдете много хороших ресурсов.Например, этот веб-сайт .

И я только что сделал этот простой пример, не используя глобальные переменные: 

// 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];
    };

})();
2 голосов
/ 05 ноября 2010

Код, который у вас уже есть, покрывает необходимую вам общую функцию 1002 *, которая заключается в установке значения кнопки для определенной строки.

Расширение, которое вы ищетеat - это изменение значения этой строки на одно из трех значений.Первым шагом может быть рассмотрение того, как вы сможете изменить значение более чем на один (не обязательно перенос).Это может быть сделано простым способом с массивом, что-то вроде следующего: 

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.Это, возможно, проще и чище, если вы знаете, что этот метод будет единственным способом изменения метки.Однако, если метка может быть произвольно изменена на другое значение с помощью внешнего кода, возможно, вы захотите обработать индекс на лету, получив текущую метку кнопки и сравнив ее по очереди с каждым элементом массива.Это медленнее, немного неуклюже, но более устойчиво к внешним изменениям.

0 голосов
/ 05 ноября 2010

Вы также можете сделать что-то подобное.Все зависит от того, какую гибкость / масштабируемость вы хотите.

Здесь мы храним значения в объекте, поэтому мы можем видеть: с учетом текущего состояния, куда мы должны перейти.. 1003 *

Очевидно, что это не лучшее решение, если вы будете добавлять гораздо больше состояний, но может быть полезно, если по какой-то причине состояния не будут «циклически изменяться». 

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];   
}
...