需要帮助JQuery MVC！紧急 [英] Need Help with JQuery MVC! URGENT
本文介绍了需要帮助JQuery MVC！紧急的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你好，我有一个JQuery / JavaScript MVC项目我根本无法工作。
目标：创建一个CSS Border Radius Generator，只使用JQuery，CSS和Bootstrap for UI。 br />
问题：根据我的知识，一切都写得正确，但仍然无法使其正常工作。当用户在输入内部更改Corner Radius的值时，它会更新中间的框并重新打印底部的代码以供用户复制和粘贴。我的问题是它不会A.）更新演示框和B.）根据值显示CSS代码。
这是我的代码，只需复制并粘贴到.html文件并在浏览器中打开，不需要任何其他内容：
Hello, I have a JQuery/JavaScript MVC project I can't get working at all.
Goal: Create a CSS Border Radius Generator, using only JQuery, CSS and Bootstrap for UI.
Problem: Everything is written properly to my knowledge but still can't get it working. When the User changes a value for a Corner Radius, inside of the input, it updates the box in the middle and reprints the code at the bottom for the User to copy and paste. My issue is that it won't A.) Update the Demo box and B.) Display the CSS Code based on the values.
Here's my code, simply copy and paste into .html file and open in browser, nothing else needed:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
table {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
} .bl {
width: 70px;
float: right;
} .br {
width: 70px;
float: left;
} #demo_box {
border: 1px solid #000;
width: 100px;
height: 100px;
margin: 10px;
} textarea {
margin: -10px -15px -10px -15px;
width: 290px;
}
</style>
<script>
//ViewModal
var ViewModel = function () {
function get_radius_top_left() { return $('#radius_top_left_input' ).val; }
function get_radius_top_right() { return $('#radius_top_right_input' ).val; }
function get_radius_bottom_left() { return $('#radius_bottom_left_input' ).val; }
function get_radius_bottom_right(){ return $('#radius_bottom_right_input').val; }
function set_radius_top_left(value) {
$('#radius_top_left_input').val = value;
$('#demo_box').attr('border-top-left-radius',value+'px');
$('#demo_box').attr('-webkit-border-top-left-radius',value+'px');
$('#demo_box').attr('-moz-border-radius-topleft',value+'px');
}
function set_radius_top_right(value) {
$('#radius_top_right_input').val = value;
$('#demo_box').attr('border-top-right-radius',value+'px');
$('#demo_box').attr('-webkit-border-top-right-radius',value+'px');
$('#demo_box').attr('-moz-border-radius-topright',value+'px');
}
function set_radius_bottom_left(value) {
$('#radius_bottom_left_input').val = value;
$('#demo_box').attr('border-bottom-left-radius',value+'px');
$('#demo_box').attr('-webkit-border-bottom-left-radius',value+'px');
$('#demo_box').attr('-moz-border-radius-bottomleft',value+'px');
}
function set_radius_bottom_right(value) {
$('#radius_bottom_right_input').val = value;
$('#demo_box').attr('border-bottom-right-radius',value+'px');
$('#demo_box').attr('-webkit-border-bottom-right-radius',value+'px');
$('#demo_box').attr('-moz-border-radius-bottomright',value+'px');
}
return {
get_radius_top_right : get_radius_top_right ,
set_radius_top_left : set_radius_top_left ,
get_radius_bottom_right : get_radius_bottom_right,
set_radius_bottom_left : set_radius_bottom_left
};
};
//ViewController
var ViewController = function ( pModel ) {
var model = pModel || new ViewModel();
function update_view() {
modal.set_radius_top_left( modal.get_radius_top_left() );
modal.set_radius_top_right( modal.get_radius_top_right() );
modal.set_radius_bottom_left( modal.get_radius_bottom_left() );
modal.set_radius_bottom_right(modal.get_radius_bottom_right());
modal.get_css_code();
}
function get_css_code() {
var code = '';
if (modal.get_radius_top_left() > 0) {
code += 'border-top-left-radius: ' + modal.get_radius_top_left() + 'px;\n';//CSS3
code += '-webkit-border-top-left-radius: ' + modal.get_radius_top_left() + 'px;\n';//Webkit
code += '-moz-border-radius-topleft: ' + modal.get_radius_top_left() + 'px;\n';//Mozilla
if (modal.get_radius_top_right() > 0) {
code += 'border-top-right-radius: ' + modal.get_radius_top_right() + 'px;\n';//CSS3
code += '-webkit-border-top-right-radius: ' + modal.get_radius_top_right() + 'px;\n';//Webkit
code += '-moz-border-radius-topright: ' + modal.get_radius_top_right() + 'px;\n';//Mozilla
if (modal.get_radius_bottom_left() > 0) {
code += 'border-bottom-left-radius: ' + modal.get_radius_bottom_left() + 'px;\n';//CSS3
code += '-webkit-border-bottom-left-radius: ' + modal.get_radius_bottom_left() + 'px;\n';//Webkit
code += '-moz-border-radius-bottomleft: ' + modal.get_radius_bottom_left() + 'px;\n';//Mozilla
if (modal.get_radius_bottom_right() > 0) {
code += 'border-bottom-right-radius: ' + modal.get_radius_bottom_right() + 'px;\n';//CSS3
code += '-webkit-border-bottom-right-radius: ' + modal.get_radius_bottom_right() + 'px;\n';//Webkit
code += '-moz-border-radius-bottomright: ' + modal.get_radius_bottom_right() + 'px;\n';//Mozilla
}
}
}
}
$('#code').val = code;
}
function init() {
$('#radius_top_left_input' ).change(function () { update_view(); });
$('#radius_top_right_input' ).change(function () { update_view(); });
$('#radius_bottom_left_input' ).change(function () { update_view(); });
$('#radius_bottom_right_input').change(function () { update_view(); });
}
return { init: init, model: model };
};
//PageLoad
$(document).ready(function() {
new ViewController().init();
});
</script>
</head>
<body>
<table class="list-group">
<thead class="list-group-item">
<tr><th><h3>Border Radius<br/>Generator CSS</h3></th></tr>
</thead>
<tbody class="list-group-item">
<tr>
<td><input id="radius_top_left_input" type="number" class="form-control bl" min="0" title="Element's Top Left Border Radius" alt="Element's Top Left Border Radius" placeholder="4" value="0" autofocus="true" /></td>
<td></td>
<td><input id="radius_top_right_input" type="number" class="form-control br" min="0" title="Element's Top Right Border Radius" alt="Element's Top Right Border Radius" placeholder="4" value="" /></td>
</tr>
<tr>
<td></td><td><div id="demo_box"></div></td><td></td>
</tr>
<tr>
<td><input id="radius_bottom_left_input" type="number" class="form-control bl" min="0" title="Element's Bottom Left Border Radius" alt="Element's Bottom Left Border Radius" placeholder="4" value="" /></td>
<td></td>
<td><input id="radius_bottom_right_input" type="number" class="form-control br" min="0" title="Element's Bottom Right Border Radius" alt="Element's Bottom Right Border Radius" placeholder="4" value="" /></td>
</tr>
</tbody>
<tfoot class="list-group-item" style="background: #ddd">
<tr style="margin: 0px;">
<td colspan="3"><textarea id="code" class="form-control" rows="3" style="width: 290px" readonly></textarea></td>
</tr>
</tfoot>
</table>
</body>
</html>推荐答案
('#radius_top_left_input' ).val; }
function get_radius_top_right() { return
('#radius_top_left_input' ).val; } function get_radius_top_right() { return
('#radius_top_right_input' ).val; }
function get_radius_bottom_left() { return
('#radius_top_right_input' ).val; } function get_radius_bottom_left() { return
('#radius_bottom_left_input' ).val; }
function get_radius_bottom_right(){ return
('#radius_bottom_left_input' ).val; } function get_radius_bottom_right(){ return
这篇关于需要帮助JQuery MVC！紧急的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
