我有一个js代码，最多可将图标选择限制为14个，并且我想分别显示我选择的图标数量，并在左侧和右侧显示我选择的文本 我想更新“ 12 Monte”图标的数量。 而且我还想更新右侧的“ 2分钟”
const icons = document.getElementsByClassName("fa-baby");
for (let i = 0; i < icons.length; i++) {
icons[i].addEventListener("click", function() {
let ctn = document.getElementsByClassName("text-primary").length;
if (ctn <= 14 && !this.classList.contains("text-primary")) {
this.classList.add("text-primary");
} else if (this.classList.contains("text-primary")) {
this.classList.remove("text-primary");
}
});
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.6/css/mdb.min.css" rel="stylesheet">
<table class="table">
<tbody>
<td style="border:none;"> </td>
<td style="border:none;">
<p>Maxi</p>
<p>Geschlect</p>
<form>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<select class="mdl-textfield__input" id="octane" name="octane">
<option value="">weiiblich</option>
</select>
</div>
</form>
</td>
<td style="border:none;">
<p>Partnerin</p>
<p>Geschlect</p>
<form>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<select class="mdl-textfield__input" id="octane" name="octane">
<option>weiiblich</option>
<option value="" selected>mannlich</option>
<option>*</option>
</select>
</div>
</form>
</td>
</tr>
<tr>
<td>
<form>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<select class="mdl-textfield__input" id="octane1" name="octane1">
<option id="march2019" value="march2019">March 2019</option>
<option id="april2019" value="april2019">April 2019</option>
<option id="may2019" value="may2019">May 2019</option>
<option id="june2019" value="june2019">June 2019</option>
<option id="july2019" value="july2019">July 2019</option>
<option id="auguest2019" value="auguest2019">Auguest 2019</option>
<option id="september2019" value="september2019">September 2019</option>
<option id="october2019" value="october2019">October 2019</option>
<option id="november2019" value="november2019">November 2019</option>
<option id="december2019" value="december2019">December 2019</option>
<option id="january2020" value="january2020">January 2020</option>
<option id="febuary2020" value="feburary2020">Feburary 2020</option>
<option id="march2020" value="march2020">March 2020</option>
</select>
</div>
<form>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p id="para1">April 2019</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p id="para2">May 2019</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p id="para3">June 2019</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p id="para4">July 2019</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p id="para5">Augest 2019</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p id="para6">Setember 2019</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p id="para7">October 2019</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p id="para8">November 2019</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p id="para9">December 2019</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p id="para10">January 2020</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p id="para11">Fabruary 2020</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p id="para12">March 2020</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p id="para13">April 2020</p>
</td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
<td><i class="text-muted fas fa-baby fa-3x"></i></td>
</tr>
<tr>
<td>
<p>12 monte</p>
</td>
<td>
<p>2 monte</p>
</td>
</tr>
</tbody>
</table>
答案 0 :(得分：0)
您可以在每次单击按钮时刷新计数器变量值，并选择数量和剩余量。 可以将id属性添加到“ td”元素，然后使用“ getElementById”进行获取，并使用新的计数器值刷新其内部html内容。