Jquery获取特定的数组项并将它们设置为CSS样式

Question

我一直在尝试使用输入字段的名称和值来设置按钮上的样式，但无济于事，它只显示返回最后一个值，然后价值的一封信。

$(':input').each(function() { 
 
    var inputvalue = $(this).val(); 
 
    var inputname = $(this).attr("name"); 
 
    // alert(inputvalue) 
 
    // alert(inputname) 
 
    $(".button").attr("style" , inputname[0] + ":" + inputvalue[0] + ";" + inputname[1] + ":" + inputvalue[1]); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<input type="text" value="1px" name="border-width"> 
 
<select name="border-style"> 
 
    <option value="none">None</option> 
 
    <option value="solid">Solid</option> 
 
    <option value="dotted">Dotted</option> 
 
    <option value="dash">Dashed</option> 
 
</select> 
 

 
<input type="text" value="green" name="border-color"> 
 
    
 
<div class="button"></div>

Answer 1

有很多事情要解决你的代码。

• 样式属性是在DOM上的camelCase。你必须borderWidth改变border-width，并为其余
• ，你必须执行你的逻辑来设置样式上change事件处理程序相同，否则将永远不会被执行
• 你的每一个逻辑是行不通的，因为它是，我把它固定在我的例子上。

这里有一个工作示例

HTML

<input type="text" value="1px" name="borderWidth"> 
<select name="borderStyle"> 
    <option value="none">None</option> 
    <option value="solid">Solid</option> 
    <option value="dotted">Dotted</option> 
    <option value="dash">Dashed</option> 
</select> 

<input type="text" value="green" name="borderColor"> 

<div class="button">test</div> 

的Javascript

$(':input').change(function() { 
    var style = {} 
    $(':input').each(function() { 
     var inputvalue = $(this).val(); 
     var inputname = $(this).attr("name"); 
     style[inputname] = inputvalue; 
    }); 

    $(".button").css(style); 
}); 

DEMO

Answer 2

我已经合并的风格融于一个对象，然后通过了到css功能，给它所有样式。我也默认你的下拉为dotted，所以你可以看到它的作品，但你可以改变你喜欢的任何。

最后，如果你想样式更新每次更改值的时候，我会在这个建议我的两个注释之间缠绕的一切：

$(":input").on("change input", function(){ 
    //Insert below code 
}); 

你的代码改成这样：

$(function(){ 
 
    //Begin core functionality 
 
    var styles = {}; 
 
    $(':input').each(function() { 
 
     styles[$(this).attr("name")] = $(this).val(); 
 
    }); 
 
    $(".button").css(styles); 
 
    //End core functionality 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<input type="text" value="1px" name="border-width"> 
 
<select name="border-style"> 
 
    <option value="none">None</option> 
 
    <option value="solid">Solid</option> 
 
    <option value="dotted" selected="selected">Dotted</option> 
 
    <option value="dash">Dashed</option> 
 
</select> 
 

 
<input type="text" value="green" name="border-color"> 
 
    
 
<div class="button">Text</div>

Answer 3

这应该工作。 “：输入”的原因是：输入不CSS规范的一部分

$("input").keyup(function() { 
 
    change(); 
 
}); 
 
$('select').change(function(){ 
 
    change(); 
 
}); 
 

 

 
function change(){ 
 
    var style= ""; 
 
    $('.attr').each(function() { 
 
    var inputvalue = $(this).val(); 
 
    var inputname = $(this).attr("name"); 
 
    style = style + inputname+":"+inputvalue+";"; 
 
    }); 
 
    $('.button').attr('style',style); 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<input class="attr" type="text" value="1px" name="border-width"> 
 
<select class="attr" name="border-style"> 
 
    <option value="none">None</option> 
 
    <option value="solid">Solid</option> 
 
    <option value="dotted">Dotted</option> 
 
    <option value="dash">Dashed</option> 
 
</select> 
 

 
<input class="attr" type="text" value="green" name="border-color"> 
 
    
 
<div class="button">1231</div>