gpt4 book ai didi

javascript - javascript添加和删除列表、输入框、选项选择等新元素的方法

转载 作者:行者123 更新时间:2023-11-28 03:03:27 27 4
gpt4 key购买 nike

我正在尝试使用 jquery 创建一个计算 GPA 的 webview 应用程序,我创建了两个按钮,其中一个用于添加新元素,另一个用于删除元素,我正在尝试添加多个元素同时,例如模块名称、学分输入和选项选择,我也想知道是否有一种方法可以增加模块编号,例如默认有 5 个模块,最后一个模块称为模块 5,所以当我单击添加按钮,名称应更改为模块 6。

编辑:- 我已经根据这段代码添加了我正在处理的 java 脚本:-

http://jsfiddle.net/jaredwilli/tzpg4/4/

$(window).on('pageinit', function() {
$(document).ready(function(){
$("#Sadd").click(function() {
var test = $('Sc5');
var i = $('#Sc5').size() + 1;

$('<li data-role="fieldcontain" style="border:none"><label for="Sc5">Credits:</label><input type="number" id="Sc5" name="Sc5_' + i +'" value="" data-clear-btn="true"></li>').appendTo(test);
i++;
return false;

});
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CCE GPA Calculator</title>
<meta name="viewport" content="initial-scale=.80; maximum-scale=.80; minimum-scale=.80;" />
<link rel="stylesheet" type="text/css" href="css/HideSpiner.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.0-rc.1.js"></script>
</head>

<body>
<div data-role="page" id="GPA1">
<script type="text/javascript" src="js/benggpacalc.js"></script>
<script type="text/javascript" src="js/test.js"></script>
<div data-role="header" data-theme="f"> <a data-iconpos="notext" data-transition="pop" data-direction="reverse" data-role="button" data-icon="home" title="Home" href="index.html">Home</a>
<h1>BENG & BSc</h1>
</div>
<form id="form">
<ul data-role="listview" data-inset="true">
<li style="border:none">
<h1>Module 1:</h1>
</li>
<li data-role="fieldcontain" style="border:none">
<label for="Sc1">Credits:</label>
<input type="number" step="0.01" name="Sc1" id="Sc1" value="" data-clear-btn="true">
</li>
<li data-role="fieldcontain" style="border:none">
<label for="Sgrade1" class="select">Grade:</label>
<select class="Sgrade1" data-theme="f" id="Sgrade1">
<option value="-1">—</option>
<option value="4">A</option>
<option value="3.7">A-</option>
<option value="3.3">B+</option>
<option value="3">B</option>
<option value="2.7">B-</option>
<option value="2.3">C+</option>
<option value="2">C</option>
<option value="1.7">C-</option>
<option value="1.3">D+</option>
<option value="1">D</option
>
<option value="0">F</option>
</select>
</li>
<li style="border:none">
<h1>Module 2:</h1>
</li>
<li data-role="fieldcontain" style="border:none">
<label for="Sc2">Credits:</label>
<input type="number" step="0.01" name="Sc2" id="Sc2" value="" data-clear-btn="true">
</li>
<li data-role="fieldcontain" style="border:none">
<label for="Sgrade2" class="select">Grade:</label>
<select class="Sgrade2" data-theme="f" id="Sgrade2">
<option value="-1">—</option>
<option value="4">A</option>
<option value="3.7">A-</option>
<option value="3.3">B+</option>
<option value="3">B</option>
<option value="2.7">B-</option>
<option value="2.3">C+</option>
<option value="2">C</option>
<option value="1.7">C-</option>
<option value="1.3">D+</option>
<option value="1">D</option>
<option value="0">F</option>
</select>
</li>
<li style="border:none">
<h1>Module 3:</h1>
</li>
<li data-role="fieldcontain" style="border:none">
<label for="Sc3">Credits:</label>
<input type="number" step="0.01" name="Sc3" id="Sc3" value="" data-clear-btn="true">
</li>
<li data-role="fieldcontain" style="border:none">
<label for="Sgrade3" class="select">Grade:</label>
<select class="Sgrade3" data-theme="f" id="Sgrade3">
<option value="-1">—</option>
<option value="4">A</option>
<option value="3.7">A-</option>
<option value="3.3">B+</option>
<option value="3">B</option>
<option value="2.7">B-</option>
<option value="2.3">C+</option>
<option value="2">C</option>
<option value="1.7">C-</option>
<option value="1.3">D+</option>
<option value="1">D</option>
<option value="0">F</option>
</select>
</li>
<li style="border:none">
<h1>Module 4:</h1>
</li>
<li data-role="fieldcontain" style="border:none">
<label for="Sc4">Credits:</label>
<input type="number" step="0.01" name="Sc4" id="Sc4" value="" data-clear-btn="true">
</li>
<li data-role="fieldcontain" style="border:none">
<label for="Sgrade4" class="select">Grade:</label>
<select class="Sgrade4" data-theme="f" id="Sgrade4">
<option value="-1">—</option>
<option value="4">A</option>
<option value="3.7">A-</option>
<option value="3.3">B+</option>
<option value="3">B</option>
<option value="2.7">B-</option>
<option value="2.3">C+</option>
<option value="2">C</option>
<option value="1.7">C-</option>
<option value="1.3">D+</option>
<option value="1">D</option>
<option value="0">F</option>
</select>
</li>
<li style="border:none">
<h1>Module 5:</h1>
</li>
<li data-role="fieldcontain" style="border:none">
<label for="Sc5">Credits:</label>
<input type="number" step="0.01" name="Sc5" id="Sc5" value="" data-clear-btn="true">
</li>
<li data-role="fieldcontain" style="border:none">
<label for="Sgrade5" class="select">Grade:</label>
<select class="Sgrade5" data-theme="f" id="Sgrade5">
<option value="-1">—</option>
<option value="4">A</option>
<option value="3.7">A-</option>
<option value="3.3">B+</option>
<option value="3">B</option>
<option value="2.7">B-</option>
<option value="2.3">C+</option>
<option value="2">C</option>
<option value="1.7">C-</option>
<option value="1.3">D+</option>
<option value="1">D</option>
<option value="0">F</option>
</select>
</li>
<li class="ui-body ui-body-b" style="border:none">
<fieldset class="ui-grid-a">
<div>
<button type="button" id="Sadd" name="Sadd" data-theme="f">Add Module</button>
</div>
</fieldset>
</li>
<li class="ui-body ui-body-b" style="border:none">
<fieldset class="ui-grid-a">
<div>
<button type="button" id="Sremove" name="Sremove" data-theme="f">Remove Module</button>
</div>
</fieldset>
<li data-role="fieldcontain" style="border:none">
<label for="Sres">Your GPA:</label>
<input type="number" step="0.01" name="Sres" id="Sres" value="" data-clear-btn="true" readonly>
</li>
</li>
<li class="ui-body ui-body-b" style="border:none">
<fieldset class="ui-grid-a">
<div>
<button type="button" id="Scal" name="Scal" data-theme="f">Calculate</button>
</div>
</fieldset>
</li>
<li class="ui-body ui-body-b" style="border:none">
<fieldset class="ui-grid-a">
<div>
<button type="reset" data-theme="d">Reset</button>
</div>
</fieldset>
</li>
</ul>
</form>
</div>
</body>
</html>

最佳答案

使用正确的选择器,您可以获得此模块数 ( http://jsfiddle.net/Twisty/nvp05cc6/ ):

$(document).ready(function(){
var curModules = 0;
$("input[id^='Sc']").each(function(){
curModules+=1;
});
console.log(curModules);
console.log($("input[id^='Sc']").length);
});

更新后编辑

这可能对你有用,一个好的开始。您可能也喜欢这个:http://jsfiddle.net/Twisty/nvp05cc6/2/对您的 HTML 进行一些小改动,以便更轻松地选择和附加项目。

$(document).ready(function () {
$("#Sadd").click(function () {
var lastId = $("#modules h1").length;
var $newLabel = $("#module-1-label").clone();
var $newSc = $("#module-1-scredit").clone();
var $newSgrade = $("#module-1-sgrade").clone();
$newLabel.html("<h1>Module " + (lastId+1) + ":</h1>");
$newSc.find("label").attr("for", "Sc"+(lastId+1));
$newSc.find("input").attr("name", "Sc"+(lastId+1)).attr("id", "Sc"+(lastId+1));
$newSgrade.find("label").attr("for", "Sc"+(lastId+1));
$newSgrade.find("select").attr("name", "Sc"+(lastId+1)).attr("id", "Sc"+(lastId+1));
$("#modules").append($newLabel, $newSc, $newSgrade);
});
});

使用 .clone() 可以为您做很多繁重的工作,您只需为新的 ID 和名称稍微修改一下。

关于javascript - javascript添加和删除列表、输入框、选项选择等新元素的方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33655042/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com