javascript - 将多个表单数据传递给 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

您基本上需要单独捕获所有三个值并将它们连接成一个。我还建议使用 slider 控件，以便您可以设置可以应用的指定数字范围(例如 rgb 从 0 到 255)。如果您使用文本字段，您还需要检查该值是否高于 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();
    });
});