我创建了带有 2 个字段的表单,用户可以在其中添加值以使用他的值生成矩形 div。
<form>
<fieldset class="fieldset">1
<input type="text" id="test" name="test" />2
<input type="text" id="test2" name="test" />
</fieldset>
<input type="button" id="add_new" value="add new">
</form>
<div id="dimensions"></div>
<div id="trouble"></div>
<div id="texte"></div>
一切都很完美,但现在我添加了一些功能来动态添加更多带有表单的字段集。我想用表单字段为每个字段集绘制矩形 div。当我在第一行输入值 100x200px 时,jquery 将绘制具有这些尺寸的 div,但是当我输入第二个或第三个字段集时,div 将用另一个字段集中的值重绘。我不知道为什么这些来自动态添加的字段集的值不起作用.
$(document).ready(function () {
var fieldset_parent = $(".fieldset:eq(0)").clone();
$(document).on("click", "input#add_new", function () {
$("fieldset:last").after($(fieldset_parent).clone());
});
$("#test, #test2").keyup(function () {
var width = parseInt($("#test").val());
var height = parseInt($("#test2").val());
var max = 200;
var min = 20;
var ratio;
if (width >= height) {
$("#trouble").html("Width bigger");
ratio = max / width;
width = ratio * width;
height = height * ratio;
} else {
$("#trouble").html("height bigger");
ratio = max / height;
height = ratio * height;
width = width * ratio;
};
$("#dimensions").html(width + " x " + height);
$("#texte").css({
"width": width + "px",
"height": height + "px"
});
});
});
非常感谢你的帮助