Условное форматирование десятичных знаков после преобразования их в сантиметры или дюймы - PullRequest
Новая
       104

Условное форматирование десятичных знаков после преобразования их в сантиметры или дюймы

1 голос
/ 05 мая 2020

У меня есть переключатель, который преобразует мои числа в сантиметры или дюймы с 1 десятичным знаком.

Однако я бы хотел, чтобы в сантиметрах не было десятичных знаков, а в дюймах - 1 знак после запятой.

Это мой текущий код: 

function converTo(scale) {
  $('#ct_size_guide-1761 td').each(() => {
   // I forgot exact conversion:
    var multiplier = (scale == 'in') ? 2.5 : 0.4; 
    var newVal=(parseFloat($(this).text()) * multiplier).toFixed(1);   

    $(this).text(newVal);
    $(this).siblings('.scale').text((scale=='in')? 'cm' : 'in') ;
  });
}

1 Ответ

1 голос
/ 05 мая 2020

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

Итак, вам нужно заменить: 

var multiplier = scale === 'in' ? 2.5 : 0.4;
var newVal = (parseFloat($(this).text()) * multiplier).toFixed(1);

Примерно так: 

var newVal = scale === 'in'
  ? (parseFloat($(this).text()) * 2.5).toFixed(1)
  : (parseFloat($(this).text()) * 0.4).toFixed(0);

Таким образом, у вас могут быть разные множители, но также разное форматирование для каждой единицы.

Я бы, вероятно, реструктурировал код с помощью if-else, а не троичного. Таким образом, будет проще реализовать различное поведение (преобразование, форматирование ...) в зависимости от выбранной единицы: 

const $value = $('#value');
const $unit = $('#unit');
const $result = $('#result');

function updateConverstion() {
  const value = parseFloat($value.val());
  const unit = $unit.val();
  
  let targetValue;
  let targetUnit;
  
  if (unit === 'in') {
    // Show centimeters without decimals:
    targetValue = Math.round(value * 2.54);
    targetUnit = 'cm';
  } else {
    // Show inches with 1 decimal:
    targetValue = (value * 0.393701).toFixed(1);
    targetUnit = 'in';
  }

  $result.text(`${ value } ${ unit } = ${ targetValue } ${ targetUnit }`);
}

$value.on('input', updateConverstion);
$unit.on('change', updateConverstion);

updateConverstion();
<input type="text" value="100" id="value" />

<select id="unit">
  <option value="cm" selected>Centimeters</option>
  <option value="in">Inches</option>
</select>

<p id="result"></p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
...