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到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();
    });
});

将多个表单数据传递给jquery函数

1 个答案: