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>