我該如何改進或減少此javascript的冗餘？

我想從表單中的某些輸入連接一個字符串，並用該字符串填充另一個輸入。我在下面包含了我的腳本，並鏈接到了js小提琴。我該如何改進或減少此javascript的冗餘？

我認爲每個（）中條件中的代碼太冗餘了，但我似乎無法使其以任何其他方式工作。任何建議表示讚賞。

var $namers = $(".namer"); 
$namers.on('change', function() { 
    var length = $namers.length - 1; 
    var nameString = ""; 
    $namers.each(function (i) { 
     var delimiter = ""; 
     if ($(this).find(":selected").attr('value')) { 
      if (i < length) delimiter = ": "; 
      thisVal = $(this).find(":selected").text(); 
      nameString = nameString + thisVal + delimiter; 
     } else if ($(this).is("input") && $(this).val()) { 
      if (i < length && $(this).hasClass("from")) delimiter = "-"; 
      thisVal = $(this).val(); 
      nameString = nameString + thisVal + delimiter; 
     } 
    }); 
    $("#summary").val(nameString); 
});

這裏是我的原創： http://jsfiddle.net/3HsQW/

，並且使用數組，我不知道的東西提高第一刺好得多。 http://jsfiddle.net/3HsQW/1/

來源

2013-01-17 Christopher Meyers

我沒有看到任何冗餘，除了nameString線。但是，我發現無用的代碼：'nameString'變量屬於第2行創建的匿名函數。''.each（）'調用中使用的匿名函數的每次運行都會被測試，並且在它通過任何條件，'nameString'被設置。只有最後一個任務會被加載到$（'＃sumary'）'中。如果這是預期的行爲，那麼您應該反過來橫過'$ namers'並在找到第一個命中後破壞。 –

像這樣的問題屬於http://codereview.stackexchange.com/，不在這裏。 – jfriend00

@ jfriend00謝謝。我不知道那個網站。我會看看我能否解決這個問題。 –

我試過了其他兩個答案，但都沒有成功。我也學會了我應該使用http://codereview.stackexchange.com。

我最終還是決定對這個（雖然我有關於這是否會幫助其他人預約）：

var $namers = $(".namer"); 
$namers.on('change', function() { 
    var length = $namers.length - 1; 
    var nameString = ""; 
    var names = []; 
    $namers.each(function (i) { 
     var delimiter = ""; 
     if (i < length) delimiter = ": "; 
     if ($(this).find(":selected").attr('value')) { 
      names[i] = $(this).find(":selected").text() + delimiter; 
     } else if ($(this).is("input") && $(this).val()) { 
      if ($(this).hasClass("from")) delimiter = "-"; 
      names[i] = $(this).val() + delimiter; 
     } 
     if (names[i]) nameString += names[i]; 
    }); 
    $("#summary").val(nameString); 
});

來源

2013-01-17 03:01:53

我還沒有完全測試，但這樣的事情應該工作以及：

var $namers = $('.namer'); 

$namers.on('change', function() { 
    var nameString = ''; 

    $namers.each(function(i) { 
     var $this = $(this); 
     var $selected = $this.find(':selected'); 

     if ($selected.attr('value')) { 
      nameString += $selected.val() + ': '; 
     } else if ($this.is('input') && $this.val()) { 
      nameString += $this.val() + $this.hasClass('from') ? '-' : ''; 
     } 
    }); 

    $('#summary').val(nameString); 
});

的i < length條件總是被false，這樣你就可以刪除該代碼。

來源

2013-01-17 01:48:57 Blender

感謝您的回答，我會嘗試一下。但我想知道你對我的<長度的評論。據我所知，它實際上按預期工作，除了最後一項外，其結果爲真。 –

這是jquery阻礙其中的罕見情況之一。我推薦類似：

$("option").each(function() { this.value = $(this).text(); }); 
$namers = $(".namer"); 
$names.on('change', function() { 
    var length = $namers.length - 1; 
    var nameString = ""; 
    $namers.each(function (i) { 
     nameString += this.value; 
     if (this.tagName == 'SELECT') nameString += ':'; 
     if (this.className == 'from') nameString += '-'; 
    }); 
    $("#summary").val(nameString); 
});

來源

2013-01-17 02:03:46 dspeyer

我該如何改進或減少此javascript的冗餘？

回答

相關問題