Question

我很难理解如何最好地利用if else语句。例如：

$('.qty_input').keyup(function () {
var qtyValue = $('.qty_input').val();
    if (qtyValue >= number1 && qtyValue <= number10){
        if ($('option[value="2"]').parent("span").length) {$('option[value="2"]').unwrap('<span/>')}
        if ($('option[value="3"]').parent("span").length) {$('option[value="3"]').unwrap('<span/>')}
        if ($('option[value="4"]').parent("span").length) {$('option[value="4"]').unwrap('<span/>')}
        if ($('option[value="1"]').parent("span").length) {$('option[value="1"]').unwrap('<span/>')}
        if ($('option[value="2"]').parent("span").length) {}else {$('option[value="2"]').wrap('<span/>')}
        if ($('option[value="3"]').parent("span").length) {}else {$('option[value="3"]').wrap('<span/>')}
        if ($('option[value="4"]').parent("span").length) {}else {$('option[value="4"]').wrap('<span/>')}
       }
       else if (qtyValue >= number2 && qtyValue <= number20){
        if ($('option[value="2"]').parent("span").length) {$('option[value="2"]').unwrap('<span/>')}
        if ($('option[value="3"]').parent("span").length) {$('option[value="3"]').unwrap('<span/>')}
        if ($('option[value="4"]').parent("span").length) {$('option[value="4"]').unwrap('<span/>')}
        if ($('option[value="1"]').parent("span").length) {$('option[value="1"]').unwrap('<span/>')}
        if ($('option[value="1"]').parent("span").length) {}else {$('option[value="1"]').wrap('<span/>')}
        if ($('option[value="3"]').parent("span").length) {}else {$('option[value="3"]').wrap('<span/>')}
        if ($('option[value="4"]').parent("span").length) {}else {$('option[value="4"]').wrap('<span/>')}
       }
       else if (qtyValue >= number3 && qtyValue <= number30){
        if ($('option[value="2"]').parent("span").length) {$('option[value="2"]').unwrap('<span/>')}
        if ($('option[value="3"]').parent("span").length) {$('option[value="3"]').unwrap('<span/>')}
        if ($('option[value="4"]').parent("span").length) {$('option[value="4"]').unwrap('<span/>')}
        if ($('option[value="1"]').parent("span").length) {$('option[value="1"]').unwrap('<span/>')}
        if ($('option[value="2"]').parent("span").length) {}else {$('option[value="2"]').wrap('<span/>')}
        if ($('option[value="1"]').parent("span").length) {}else {$('option[value="1"]').wrap('<span/>')}
        if ($('option[value="4"]').parent("span").length) {}else {$('option[value="4"]').wrap('<span/>')}
       }
       else if (qtyValue >= number4 && qtyValue <= 999999){
        if ($('option[value="2"]').parent("span").length) {$('option[value="2"]').unwrap('<span/>')}
        if ($('option[value="3"]').parent("span").length) {$('option[value="3"]').unwrap('<span/>')}
        if ($('option[value="4"]').parent("span").length) {$('option[value="4"]').unwrap('<span/>')}
        if ($('option[value="1"]').parent("span").length) {$('option[value="1"]').unwrap('<span/>')}
        if ($('option[value="2"]').parent("span").length) {}else {$('option[value="2"]').wrap('<span/>')}
        if ($('option[value="3"]').parent("span").length) {}else {$('option[value="3"]').wrap('<span/>')}
        if ($('option[value="1"]').parent("span").length) {}else {$('option[value="1"]').wrap('<span/>')}
       }});

有人对我如何对其进行更新以使其更清洁，更有效有任何建议吗？谢谢。

Answer 1

在查看您的代码时，我注意到一些可以转换为函数或立即删除的模式。

$('.qty_input').keyup(function () {
  const qtyValue = $('.qty_input').val();
  const options = {
    1: $('option[value="1"]'),
    2: $('option[value="2"]'),
    3: $('option[value="3"]'),
    4: $('option[value="4"]'),
  };
  // unwrap all, code is the same regardless of `if` statement::
  Object.values(options).forEach((option) => {
    if (option.parent("span").length) {
      option.unwrap('<span/>')
    }
  });
  function wrap(keyToIgnore) {
    keyToIgnore = String(keyToIgnore); // object properties are strings
    Object.entries(options)
      .filter(([key]) => key !== keyToIgnore)
      .forEach(([, option]) => {
        if (!option.parent("span").length) {
          option.wrap('<span/>')
        }
      });
  }
  const indexToIgnore = 1 + ranges.findIndex(([min, max]) => qtyValue >= min && qtyValue <= max);
  wrap(indexToIgnore);
});

Answer 2

一个选择是创建jQuery集合的对象（针对每个value=）。由于每个外部qtyValue条件的解包过程都是相同的，因此您可以无条件运行该部分代码，方法是遍历对象的值，如果项目的父项是跨度，则unwrap进行ping操作。然后，创建一个函数，将在value ping时要忽略的wrap作为参数，并遍历不具有value的对象的值。

例如，您可以将独立的number#变量更改为范围数组，这也很好

[
  [10, 20], // [number1, number10]
  [21, 30], // [number2, number20]

这不仅会更好地使代码在定义这些范围时简洁明了，而且还可以使.find适当的索引更容易调用wrap并用-替换四个{ {1}} / if语句的末尾类似：

else if

完整：

const indexToIgnore = 1 + ranges.findIndex(([min, max]) => qtyValue >= min && qtyValue <= max);
wrap(indexToIgnore);

减少代码并简化IF-THEN-ELSE块的逻辑

2 个答案: