jQuery複数のフィールドからCSSプロパティを設定する

Question

フォームには約40種類のフィールド（選択、ラジオ、入力など）が含まれています。これらのフィールドには、CSSプロパティとして適用される値が含まれています。色は16進数のコードをとる）。

私は既に各フィールドのIDを使用して変数にアタッチし、次にキーアップ時に変更したい要素のCSSプロパティに変数を渡す作業バージョンを取得しました。

function elementStyles(){ 
    var bgcolor = $("input#id_bgcolor").val(); 
    var color = $("input#id_textcolor").val(); 
    var marginbottom = $("input#id_margin_btm").val(); 
    var borderradius = $("input#id_border_rad").val(); 

    $("h2").css({ 
     "background-color": bgcolor, 
     "color": color 
    }); 

    $("div").css({ 
     "margin-bottom": marginbottom, 
     "border-radius": borderradius 
    }); 
} 

$("input, select").on("change keyup, function(){ 
    elementStyles(); 
}); 

私の質問は、心の中で彼らの順序を保持すると量が将来的に変更される可能性があり、フォーム項目の値のすべてを取得するための最も効率的な方法は何か、です。また、マークアップを変更してデータ属性を追加する方法もありません。

40個のプロパティすべてを手動でターゲティングしただけのケースですか？

Answer 1

これにはいくつかの方法がありますが...ここに1つです：

あなたはIDとその対応する要素とプロパティ間のマップを作成することができます。

var idMap = { 
    'id_bgcolor': { 
    'element': 'h2', 
    'property': 'background-color' 
    }, 
    'id_margin_btm': { 
    'element': 'div', 
    'property': 'margin-bottom' 
    }, 
}; 

次に、あなたを介してループすることができますマップは、値を取得し、夫婦でそれらを設定するとループ：あなたは私はトン悔しだdata-属性を（追加することができた場合

var inputIds = Object.keys(idMap); 
var elements = {}; 
for (var i = 0, z = inputIds.length; i < z; i++) { 
    var $input = $('#' + inputIds[i]); 
    var value = $input.val(); 
    var mapping = idMap[inputIds[i]]; 
    var element = elements[mapping.element] || {}; 
    var property = mapping.property; 
    element[property] = value; 
    elements[mapping.element] = element; 
} 
var elementNames = Object.keys(elements); 
for (var e = 0, z = elementNames.length; e < z; e++) { 
    $(elementNames[e]]).css(elements[elementNames[e]]); 
} 

はここで、別のですあなたができないことを見てください）：

要素にCSSプロパティの名前をdata-属性として追加します。例えば：

elementStylesで次に

<input class="style" data-element="div" data-attribute="margin-bottom" type="text"> 
<input class="style" data-element="h2" data-attribute="background-color" type="text"> 

：

$('.style').each(function (item) { 
    var $item = $(item); 
    $($item.data('element')).css($item.data('attribute'), $item.val()); 
}); 

そのように、あなたは一度だけ、それらのそれぞれを定義しています。あなたは.css()への呼び出しを増やすことになりますが、それは一般に十分に速いです。あなたはそれが遅く見つけた場合は、特定の要素ラの属性のすべてをコンパイルすることができます：

var elements = {}; 
$('.style').each(function (item) { 
    var $item = $(item); 
    var element = elements[$item.data('element')] || {}; 
    element[$item.data('attribute')] = $item.val(); 
}); 
var elementNames = Object.keys(elements); 
for (var e = 0, z = elementNames.length; e < z; e++) { 
    $(elementNames[e]]).css(elements[elementNames[e]]); 
} 

があり、あなたは一度にすべてをやって、その後、.css()に設定するためのオブジェクトを構築しています。