尝试逐个更改变量时出现ModifyVars问题 [英] ModifyVars issue when trying to change variables one by one
问题描述
我在尝试为我的网站制作实时自定义部分时遇到了一个大问题。我希望能够在字段中添加值时在浏览器中修改LESS文件中的每个变量，并立即在浏览器中查看结果。例如：
I am having a big issue trying to make a live customization section for my website. I want to be able to modify each variable from my LESS file in the browser when a value is added in the field and see the result immediately in the browser. For example:
$('#txtBaseColor > .form-control').change(function(){
var bgBase = $(this).val();
less.modifyVars({
'@bgBase': bgBase
});
});
// Base bckg color change
$('#txtBaseTextColor > .form-control').change(function(){
var cBaseContrast = $(this).val();
less.modifyVars({
'@cBaseContrast': cBaseContrast
});
});
我知道LESS js文件提供的modifyVars函数不支持，但其他一些解决方案会非常感谢。或者也许有人可以通过发送包含所有修改值的数组并将其发送回modifyVars函数来帮助我创建解决方案？
I know the modifyVars function provided by LESS js file doesn't support that, but some other solutions would be very appreciated. Or maybe somebody could help me create a solution by sending an array with all the modified values and send it back to the modifyVars function?
推荐答案
在将新值传递给 modifyVars 之后，你应该调用 less.refreshStyles（）; 。
you should call less.refreshStyles(); after passing new value to modifyVars.
您可以使用以下javascript（取决于jquery）代码将表单值传递给 modifyVars ：
You can use the following javascript (depends on jquery) code to pass your form value to modifyVars:
function somethingChanged()
{
var fields = $( '#variables' ).serializeArray();
var variables = new Object;
jQuery.each( fields, function( i, field ) {
variables['@' + field.name] = field.value;
});
less.modifyVars(variables);
less.refreshStyles();
}
$('#variables input[type="text"]').change(somethingChanged);
$('#variables').submit(function(e){ e.preventDefault(); somethingChanged();});
当表单如下所示时，上面的Javascript代码有效：
The above Javascript code works when the form look like that shown below:
<form id="variables">
<input type="text" name="backgroundcolor" value="red">
<input type="text" name="fontcolor" value="green">
</form>
Less文件看起来如下所示：
The Less file should look like that shown beneath:
@backgroundcolor: red;
@fontcolor: green;
body {
background-color: @backgroundcolor;
color: @fontcolor;
}
当我拨打我的Less文件电话 test.less 完整的HTML可能如下所示：
When i call my Less file call test.less the complete HTML can look like that shown below:
<!DOCTYPE html>
<html>
<head>
<title>Less example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet/less" type="text/css" href="test.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.4/less.min.js"></script>
</head>
<body>
<p>Colored text</p>
<form id="variables">
<input type="text" name="backgroundcolor" value="red">
<input type="text" name="fontcolor" value="green">
</form>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
function somethingChanged()
{
var fields = $( '#variables' ).serializeArray();
var variables = new Object;
jQuery.each( fields, function( i, field ) {
variables['@' + field.name] = field.value;
});
less.modifyVars(variables);
less.refreshStyles();
}
$('#variables input[type="text"]').change(somethingChanged);
$('#variables').submit(function(e){ e.preventDefault(); somethingChanged();});
</script>
</body>
</html>
这篇关于尝试逐个更改变量时出现ModifyVars问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
