Анимация одна из трех коробок в зависимости от значения форма


Есть ли лучший способ сделать это без использования если Или случае заявления?

var val = ui.value,
$box = $('#message');
switch(true) {
  case (val > 50):
    $box.hide();
    animations.animateBox($box.html('you have chosen XN'));                        
    break;
  case (val < 50):
    $box.hide().delay(300);
    animations.animateBox($box.html('you have chosen VN'));
    break;
  default:
    $box.hide();
    animations.animateBox($box.html('you have chosen PN'));
}


1042
14
задан 22 декабря 2011 в 12:12 Источник Поделиться
Комментарии
4 ответа

Это полностью заменяет ваш переключатель заявление, используя встроенный оператор if условный оператор:

$box.hide().delay(val < 50 ? 300 : 0);
var s = val > 50 ? 'XN' : (val < 50 ? 'VN' : 'PN');
animations.animateBox($box.html('you have chosen ' + s));

первую строку можно было бы заменить эти две, пожалуй, более читабельных строк, что пропущен вызов задержки() функция, когда не применяется:

$box.hide();
val < 50 && $box.delay(300);

С @GregGuida указал, что этот код менее читабельным, я думаю, я могу сделать его более читабельным, лучше отформатировать. И я буду использовать предложение о замене первой линии с двумя из них:

$box.hide();

// only delay animation when value < 50
val < 50 && $box.delay(300);

var s = val > 50 ? 'XN' :
(val < 50 ? 'VN' :
'PN');
// set HTML
animations.animateBox($box.html('you have chosen ' + s));

Же код, но визуально менее хаотичными (даже без комментариев это бы выглядело менее хаотичным) и гораздо более читабельным. По крайней мере, гораздо более читабельным, чем исходный код ОП. Вот в этом я уверена. Читабельность-это, конечно, аргументативный нрав. Но я оставлю это другим.

18
ответ дан 22 декабря 2011 в 12:12 Источник Поделиться

Вы не должны использовать условные операторы в сочетании с переключателем... это дьявол... потому что переключатель/случае только interpretates значения !

На самом деле, что ты там делал равна

switch( true ) {
case true/false:
break;
case true/false:
break;
etc.
}

Это Оооо-так неправильно! Только используйте переключатель если у вас есть четко определенные государства/ценности, которые вы хотите проверить. Вы абсолютно должны пойти с , если/другое заявление.

if( val > 50 ) {
}
else if( val < 50 ) {
}
else { // val equals 50
}

14
ответ дан 22 декабря 2011 в 12:12 Источник Поделиться

Вы можете попробовать что-то вроде:

var val = ui.value,
$box = $('#message');
var choice = (val > 50) ? 'XN' : ((val < 50) ? 'VN' : 'PN');

if(val < 50) {
$box.hide().delay(300);
} else {
$box.hide();
};

animations.animateBox($box.html('you have chosen ' + choice));

Можно снять совсем, если заявление, если бы не задержка().

2
ответ дан 22 декабря 2011 в 12:12 Источник Поделиться

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

var val = ui.value,
var box = $('#message');
box.hide().delay(val < 50 ? 300 : 0);
var product =
val > 50 ? 'XN' :
val < 50 ? 'VN' :
'PN';
animations.animateBox(box.html('you have chosen ' + product));

Вы все равно должны рассмотреть, если код более читабельным, используя при заявления:

var val = ui.value,
var box = $('#message');
box.hide();
if (val < 50) {
box.delay(300);
}
var product;
if (val > 50) {
product = 'XN';
} else if (val < 50) {
product = 'VN';
} else {
product = 'PN';
}
animations.animateBox(box.html('you have chosen ' + product));

1
ответ дан 22 декабря 2011 в 05:12 Источник Поделиться