jquery - DOM 元素虚拟值或映射值

Question

我有 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>

现在，我手动组合四个输入以获得所需的 CSS 值。像这样的事情:

$('#elem').css('text-shadow', $('#hshad').val() + "px " + $('#vshad').val() + "px " + $('#bshad').val() + "px " + $('#cshad').val());

有没有办法可以将这些值“映射”到 #shadow 的值，同时作为 getter 和 setter？

例如 $('#shadow').val() 会给我

“0px 1px 5px #FFFFFF”

我可以通过以下方式设置四个输入的值:

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

这很大程度上是为了在编辑具有预先存在的规则的记录时能够循环遍历 CSS 规则并设置表单字段值(因为我知道您会问)。这一切都归咎于我正在制作的邪恶的所见即所得。

编辑

好的，对于这个问题来说，从 val() 传回非常重要。我正在循环浏览大约 20-30 个 CSS 规则，并且不想被单个规则所困扰。我可以在循环之后返回并分解该值，但我希望扩展val并将我的代码保持在一个漂亮、整洁的循环中。

示例

我要循环的 CSS(作为 JSON 对象)”

{
    "top": "48px",
    "left": "59px",
    "width": "100px",
    "height": "100px",
    "font-family": "Oxygen",
    "font-size": "1em",
    "font-weight": "normal",
    "color": "rgb(51, 51, 51)",
    "text-shadow": "rgb(0, 0, 0) 1px 0px 0px",
    "background-color": "rgba(0, 0, 0, 0)",
    "border-radius": "0px",
    "-moz-border-radius": "0px",
    "box-shadow": "none",
    "-moz-box-shadow": "none",
    "padding": "0px"
}

我为每个表单字段提供了一个 data-prop 属性来表示其关联的 CSS 属性，如下所示:

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

然后我会像这样循环规则

$.each(cssRules, function(name, value) {
  $('[data-prop=' + name + ']').val(value);
})

漂亮、整洁、舒适。

Answer 1

http://jsfiddle.net/XCCgv/4/

$.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;
    }

};

编辑:我看到了您的编辑，但我认为您从这里得到了想法...您可以检查 valHook 中的 $(elem).data() 并根据该情况调用不同的函数。在这里我只是检查 .id === "shadow"