Question

我有一些领域：

<div class="mystyle">
   <input name="font-size" value="12px" />
   <input name="font-family" value="Arial" />
   <input name="color" Value="#333" />

   <button class="setStyle">Save</button>
</div>

请注意我没有使用form。

现在，当我点击按钮.setStyle时，请使用input名称作为样式属性，将值作为属性值，例如：

font-size:12px;
font-family:Arial;
color:#333;

现在使用.css()

将此样式指定给div

请告诉我如何使用jQuery正确执行此操作

我试过这个：

jQuery('.setStyle').click(function(){
    var parent = jQuery(this).parent('.mystyle');

   // now run each inside parent for geting name and value
   // run a loop for setting CSS, if value is empty dont add style
}

Answer 1

DEMO ：http://jsfiddle.net/V3y4J/

var $target = $('.target');
$('.setStyle').click(function(){
    $('.mystyle > input').each(function(){
        $target.css(this.name, this.value);
    });
});

如果你想提高性能（但是你不应该使用jQuery），你也可以使用

DEMO ：http://jsfiddle.net/V3y4J/2/

var $target = $('.target'),
    $inputs = $('.mystyle > input'),
    applyStyles = function(){
        $target.css(this.name, this.value);
    };
$('.setStyle').click(function(){
    $inputs.each(applyStyles);
});

Answer 2

你可以这样做：

$(".setStyle").click(function() {
    var attributes = $(this).siblings("input").map(function() {
        if (this.value != '') return this.name + "," + this.value
    }).get();

    for (var i = 0; i < attributes.length; i++) {
        $("#styleDiv").css(attributes[i].split(",")[0], attributes[i].split(",")[1]);
    }

});

演示：http://jsfiddle.net/Za77A/3/

Answer 3

您可以使用此jQuery代码：

$('.setStyle').click(function(){
    button = $(this)
    button.removeAttr('style')
    $('.mystyle input').each(function() {
        button.css({$(this).attr('name'): $(this).val()})
    })
})

jQuery - 从输入中获取值，然后将它们设置为样式

3 个答案: