Jquery DOM元素虚拟值或映射值

我有4个文本框，它们构成文本阴影属性的输入，并且包含在一个DIV中，如下所示：

<div id="shadow">
    <input type="number" min="-5" max="5" step="1" value="0" id="hshad" />
    <input type="number" min="-5" max="5" step="1" value="0" id="vshad" />
    <input type="number" min="0" max="20" step="1" value="0" id="bshad" />
    <input type="text" value="#000000" id="cshad" />
</div>

有没有一种方法可以将这些值“映射”到作为getter和setter的

#shadow

的值

例如

$（'#shadow'）.val（）

会给我

“0px 1px 5px#FFFFFF”

我可以通过以下操作设置四个输入的值：

$（'#shadow'）.val（“0px 1px 5px#FFFFFF”）

这主要是为了（因为我知道你会问）在编辑具有预先退出规则的记录时能够循环使用CSS规则并设置表单字段值。这都是我做的一个邪恶的所见即所得

编辑

好的，为了回答这个问题，从

val（）

返回是很重要的。我正在循环使用大约20-30条CSS规则，我不想被一条规则难倒。我可以在循环之后返回并分解值，但我希望扩展

val

，并将代码保持在一个漂亮、整洁的循环中

示例

我的CSS循环（作为JSON对象）”

我为每个表单字段的关联CSS属性赋予一个

数据属性

，如下所示：

<input type="text" data-prop="font-family" />

漂亮、整洁、舒适

var value = [];
$('div#shadow input').filter(function(index, val) {
   index != 3 ? value.push(this.value + 'px') : value.push(this.value);
});

console.log(value.join(' '));

---

是的，使用自定义插件或函数。为了简单起见，我将使用函数

function getShadow() {
    return $.map( $("#shadow input"), function (element,index) {
        return index === 3 ? element.value : element.value + "px"
    }).join(" ");
}

console.log(getShadow());

​http://jsfiddle.net/XCCgv/

---

编辑：我看到了你的编辑，但我认为你从这里得到了想法…你可以在valHook中检查

$（elem）.data（）

，并根据这一点调用不同的函数。这里我只是检查

。id==“shadow”

这里有一个简单的jQuery函数，你可以将它用作你案例的getter/setter：

$.fn.customVal = function(val){
     if(!val){
       //getter
       var value = [];
       $('input',$(this)).filter(function(index, val) {
            value.push(this.value);
       }); 

        value = $.map(value,function(elem,index){
           return index != 3 ? elem + 'px' : elem;
        }); 
       return value.join(' '); 
     }else{
       //setter
       var parts = val.split("px");
       $('input',$(this)).each(function(index, val) {
            $(this).val($.trim(parts[index]));
       });  

    }
};

alert($('#shadow').customVal());

$('#shadow').customVal("0px 1px 5px #FFFFFF");

alert($('#shadow').customVal());

---

​

这让我在一个实例上运行，但我无法使用该语法循环所有输入绝对难以置信。正是我所期待的for@KyleMacey请注意，在setter中，return true是向jQuery发出钩子成功的信号。否则，它会尝试设置

div的
值，这可能会导致ieHmmm中出现错误……返回它附加到的元素是否更为常规链接函数？例如：
$（'#shadow'）.val（'…'）.appendTo（'…'））
我可能完全偏离了基准，这对我来说并不重要，但是jw。@KyleMacey它与链接无关，
.val
函数调用自身内部的钩子，并返回
这个
。它不返回钩子返回的意义。从来没有深入过JQ，所以请原谅我的误解
var value = [];
$('div#shadow input').filter(function(index, val) {
   index != 3 ? value.push(this.value + 'px') : value.push(this.value);
});

console.log(value.join(' '));

function getShadow() {
    return $.map( $("#shadow input"), function (element,index) {
        return index === 3 ? element.value : element.value + "px"
    }).join(" ");
}

console.log(getShadow());

$.valHooks.div = {

    get: function( elem ) {
        if( elem.id !== "shadow" ) return;

        return $.map( $("input", elem ), function (element,index) {
                return index === 3 ? element.value : element.value + "px"
        }).join(" ");

    },

    set: function( elem, value ) {
        if( elem.id !== "shadow" ) return;

        var inputs = $( "input", elem );

        $.each( value.split(" "), function( index, value ) {
            var val = parseFloat(value);
            inputs[index].value = isNaN(val) ? value : val;
        });

        return true;
    }

};

$.fn.customVal = function(val){
     if(!val){
       //getter
       var value = [];
       $('input',$(this)).filter(function(index, val) {
            value.push(this.value);
       }); 

        value = $.map(value,function(elem,index){
           return index != 3 ? elem + 'px' : elem;
        }); 
       return value.join(' '); 
     }else{
       //setter
       var parts = val.split("px");
       $('input',$(this)).each(function(index, val) {
            $(this).val($.trim(parts[index]));
       });  

    }
};

alert($('#shadow').customVal());

$('#shadow').customVal("0px 1px 5px #FFFFFF");

alert($('#shadow').customVal());