JS的每個手動複製功能的替代

Question

我正在尋找方法來自動選擇這個選項。例如，我將有10個雙輸入（總共20個輸入），而且我不想爲每個輸入寫JS腳本，但只需使用每個（）函數（我以不同的方式打開），然後使用只聲明選擇器。

的jsfiddle：http://jsfiddle.net/vs7fa/

理念：

var SELECTORS_H = array(); 

$.each(SELECTORS_H){ 

    $('SELECTOR_H').keyup(function() { 
     // do magic 
     $('SELECTOR_V').val(num); 
    }); 

    $('SELECTOR_V').keyup(function() { 
     // do magic 
     $('SELECTOR_H').val(num); 
    }); 
} 

HTML：

<label for="h_one">H_ONE:</label> 
<input type="text" name="h_one"> 

<label for="v_one">V_ONE:</label> 
<input type="text" name="v_one"> 

將會有更多的投入。模式是：

h_one, v_one 
h_two, v_two 
h_something, v_something 
... 

JS：

$(function() { 

     $('input[name="h_one"]').keyup(function() { 
      var one = $(this).val(); 
      if (one > 0) { 
       var num = Math.abs(one) * -1; 
      } 
      else { 
       var num = Math.abs(one) * 1; 
      } 
      $('input[name="v_one"]').val(num); 
     }); 

     $('input[name="v_one"]').keyup(function() { 
      var two = $(this).val(); 
      if (two > 0) { 
       var num = Math.abs(two) * -1; 
      } 
      else { 
       var num = Math.abs(two) * 1; 
      } 
      $('input[name="h_one"]').val(num); 
     }); 

    }); 

Answer 1

您使用選擇與您的所有元素和普通類可以處理這種數據屬性知道元素和鏈接的元素。

HTML：

<label>H_ONE:</label> 
<input type="text" class="handler" data-id="h1" data-link="v1" /> 
<br> 
<label>V_ONE:</label> 
<input type="text" class="handler" data-id="v1" data-link="h1" /> 

代碼：

$(function() { 
    $('.handler').keyup(function() { 
     var one = $(this).val(); 
     if (one > 0) { 
      var num = Math.abs(one) * -1; 
     } else { 
      var num = Math.abs(one) * 1; 
     } 
     $('input[data-id=' + $(this).attr("data-link")+']').val(num); 
    }); 
}); 

演示：http://jsfiddle.net/8KgTk/

Answer 2

您應該能夠使用jQuery和製造項目相同的類來執行.each功能。

如：

<label class="forElement" for="h_one">H_ONE:</label> 
<input class="inputElement" type="text" name="h_one"> 

<label class="forElement"for="v_one">V_ONE:</label> 
<input class="inputElement" type="text" name="v_one"> 

$('.forElement').each(function() { 
    //some code 
} 

Answer 3

可能是這樣的......

的jsfiddle：http://jsfiddle.net/vs7fa/3/

$('input[name="h_one"]').keyup(function() { 
    var num = DoMagic($(this)); 
    $('input[name="v_one"]').val(num); 
}); 

$('input[name="v_one"]').keyup(function() { 
    var num = DoMagic($(this)); 
    $('input[name="h_one"]').val(num); 
}); 

function DoMagic(element) { 
    var one = $(element).val(); 
    if (one > 0) { 
     var num = Math.abs(one) * -1; 
    } else { 
     var num = Math.abs(one) * 1; 
    } 
    return num; 
} 

Answer 4

如果需要，您可以在不添加額外屬性的情況下執行此操作。

$(function() { 
    $('input[name^="h_"], input[name^="v_"]').keyup(function() { 
     var one = $(this).val(); 
     var num = - one; 
     var inputType = $(this).attr("name").substr(0,1); 
     var inputNumber = $(this).attr("name").substr(2); 
     $('input[name="'+(inputType == 'v' ? 'h' : 'v')+'_' + inputNumber + '"]').val(num); 
    }); 
}); 

不過Irvin Dominin aka愛德華的解決方案相當不錯。

Answer 5

這是一個不需要額外標記的溶劑，並且不使用字符串連接來進行邏輯處理。它使用$.proxy()來獲得正確的範圍。

Fiddle