将多个表单数据传递给一个jQuery函数

Question

真的，我需要的是如何将多个变量从表单传递给jQuery。

细节：

我想创建一个字体颜色混合器为我的网页。我成功地创建了它的灰度版本，当人们输入参数时，它会使字体变亮或变暗。我有相同的背景。该代码是这样的：

$(document).ready(function(){ 
    $("#leftsettingswindow").on("keyup", "#fontbrightness2", function(){ 
    var savedThis = this; 
    setTimeout(function() { 
     var ftbrVal = savedThis.value; 
     $('#content').css("color", "rgb(" + ftbrVal + "," + ftbrVal + "," + ftbrVal + ")"); 
     }, 1200); 
    });}); 

的HTML是这个

<div id="fontbrightness">Font brightness B&W: 
     <input type="text" size="4" value="0" id="fontbrightness2">%  </div> 

问题是这样的（当然，我不会问我是不是在jQuery的新手） 我如何通过多参数，以便我可以有一个字体颜色混合器？

的HTML是这样的：

<div id="fontcolor"> 
Font Color Mixer 
<div id="fontred"> 
Red <input type="text" class="fcolors" size="4" value="100" n="fr">% 
</div> 
<div id="fontgreen"> 
Green <input type="text" class="fcolors" size="4" value="100" n="fg">% 
</div> 
<div id="fontblue"> 
Blue <input type="text" class="fcolors" size="4" value="100" n="fb">% 
</div> 

</div> 

因为你可以在HTML代码中，我尝试了不同的标签看，但并没有达到预期的效果。

Answer 1

您基本上需要单独捕获所有三个值并将它们连接成一个。我还建议使用滑块控件，以便设置可应用的指定范围的数字（例如，rgb从0到2​​55）。如果您使用文本字段，你还需要检查，看看是否值高于255

使用输入类型号：http://jsfiddle.net/aSsqe/1/

使用输入类型范围：http://jsfiddle.net/aSsqe/2/

$(function() { 
    function getInputValues(){ 
     var r = $('#red').val(), 
      g = $('#green').val(), 
      b = $('#blue').val(), 
      rgb = 'rgb(' + r + ',' + g + ',' + b + ')'; 

     $('#result').css('background', rgb);  
    }; 
    getInputValues(); 

    $('#input-container').on('change', 'input', function(){ 
     getInputValues(); 
    }); 
});