2

text-shadow プロパティの入力を構成する 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>

現在、4 つの入力を手動で組み合わせて目的の CSS 値を取得しています。このようなもの：

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

これらの値を#shadowゲッターとセッターの両方の値に「マップ」する方法はありますか?

たとえば$('#shadow').val()、私に与えるだろう

"0px 1px 5px #FFFFFF"

そして、次のようにして 4 つの入力の値を設定できます。

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

これは、既存のルールを持つレコードを編集するときに、CSS ルールをループしてフォーム フィールドの値を設定できるようにするためのものです。これはすべて、私が作成している邪悪な WYSIWYG に適用されます。

編集

わかりました。この質問のために、から返すことが重要ですval()。私は 20 ～ 30 個の CSS ルールをループしていますが、1 つのルールで困惑する必要はありません。ループの後に戻って値を分割することもできましたが、コードを拡張してきちんと整理されたループに保つことを望んでいました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);
})

かっこよく、かっこよく、心地よく。

4

4 に答える 4

3

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

};

編集:あなたの編集を見ましたが、ここからアイデアを得たと思います... $(elem).data()valHook をチェックインし、それに応じて別の関数を呼び出すことができます。ここで私はただチェックしています.id === "shadow"

于 2012-05-29T19:23:07.187 に答える
2 
var value = [];
$('div#shadow input').filter(function(index, val) {
   index != 3 ? value.push(this.value + 'px') : value.push(this.value);
});

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

デモ

于 2012-05-29T19:15:12.053 に答える
0

はい、カスタムプラグインまたは関数を使用します。簡単にするために関数を実行します。

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/

于 2012-05-29T19:17:43.507 に答える
0

これは、ケースのゲッター/セッターとして使用できる単純な jQuery 関数です。

$.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());

働くフィドル </p>

于 2012-05-29T19:30:27.653 に答える