我正在研究价格计算器，并希望根据所选按钮计算价格。我也在寻找一种方法来做到这一点，只需一个功能，而不是每个按钮都有 onclick 功能。
我曾尝试为每个按钮创建一个 onclick 事件，但这不是方法，因为文档充满了毫无意义的功能。
<div class="btn-toolbar mb-3" role="toolbar">
<div class="btn-group btn-group-sm" role="group" style="margin: auto;">
<span class="input-group-text" id="inputGroup-sizing-sm">Počet vodivých vrstev</span>
<button type="button" class="btn btn-secondary btn-form">1</button>
<button type="button" class="btn btn-secondary btn-form">2</button>
<button type="button" class="btn btn-secondary btn-form">4</button>
<button type="button" class="btn btn-secondary btn-form">6</button>
</div>
</div>
我希望对所有这些按钮只使用一个函数，并且只读取按钮值并在之后使用它。到目前为止，我一直在为每个按钮使用 onclick，但这不是要走的路，因为文档最终充满了只包含一行的功能，我认为只有一个功能是可能的，而不是有大量功能和点击事件。我还希望按钮更改包含在名为 $currentPrice 的变量中的总产品价格，我正在更新更改和单击事件，因此它只需要编辑变量 $currentPrice。
如果您对按钮进行相同的计算，但只有您提到的不同值：
我希望对所有这些按钮只使用一个函数，并且只读取按钮值并在之后使用它。
你可以做：
$("button").click(function() {
$(".rates").html("rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*150);
});.rates {
margin-top: 15px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-toolbar mb-3" role="toolbar">
<div class="btn-group btn-group-sm" role="group" style="margin: auto;">
<span class="input-group-text" id="inputGroup-sizing-sm">Počet vodivých vrstev</span>
<button type="button" class="btn btn-secondary btn-form">1</button>
<button type="button" class="btn btn-secondary btn-form">2</button>
<button type="button" class="btn btn-secondary btn-form">4</button>
<button type="button" class="btn btn-secondary btn-form">6</button>
</div>
</div>
<div class="rates">
</div>但是，如果每个按钮的计算不同，您可以执行以下操作：
$("button").click(function() {
switch($(this).text()) {
case "1":
$(".rates").html("good rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*150);
break;
case "2":
$(".rates").html("better rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*200);
break;
case "4":
$(".rates").html("best rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*150);
break;
default:
$(".rates").html("normal rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*100);
}
});.rates {
margin-top: 15px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-toolbar mb-3" role="toolbar">
<div class="btn-group btn-group-sm" role="group" style="margin: auto;">
<span class="input-group-text" id="inputGroup-sizing-sm">Počet vodivých vrstev</span>
<button type="button" class="btn btn-secondary btn-form">1</button>
<button type="button" class="btn btn-secondary btn-form">2</button>
<button type="button" class="btn btn-secondary btn-form">4</button>
<button type="button" class="btn btn-secondary btn-form">6</button>
</div>
</div>
<div class="rates">
</div>供您评论：
请注意我如何将group-1和group-2类添加到容器 div 以及我如何将单击功能从 button 更改为group-1 button和group-2 button。我还将第二个跨度的更改 id 更改为inputGroup-sizing-sm2，因为 id 必须是唯一的，并且每页一个。
看看这个：
$(".group-1 button").click(function() {
switch($(this).text()) {
case "1":
$(".rates").html("FROM 1-ST GROUP good rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*150);
break;
case "2":
$(".rates").html("FROM 1-ST GROUP better rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*200);
break;
case "4":
$(".rates").html("FROM 1-ST GROUP best rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*150);
break;
default:
$(".rates").html("FROM 1-ST GROUP normal rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*100);
}
});
$(".group-2 button").click(function() {
switch($(this).text()) {
case "1":
$(".rates").html("FROM 2-ND GROUP good rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*150);
break;
case "2":
$(".rates").html("FROM 2-ND GROUP better rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*200);
break;
case "4":
$(".rates").html("FROM 2-ND GROUP best rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*150);
break;
default:
$(".rates").html("FROM 2-ND GROUP normal rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*100);
}
});.rates {
margin-top: 15px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-toolbar mb-3" role="toolbar">
<div class="group-1 btn-group btn-group-sm" role="group" style="margin: auto;">
<span class="input-group-text" id="inputGroup-sizing-sm">Počet vodivých vrstev</span>
<button type="button" class="btn btn-secondary btn-form">1</button>
<button type="button" class="btn btn-secondary btn-form">2</button>
<button type="button" class="btn btn-secondary btn-form">4</button>
<button type="button" class="btn btn-secondary btn-form">6</button>
</div>
</div>
<div class="btn-toolbar mb-3" role="toolbar">
<div class="group-2 btn-group btn-group-sm" role="group" style="margin: auto;">
<span class="input-group-text" id="inputGroup-sizing-sm2">Počet vodivých vrstev</span>
<button type="button" class="btn btn-secondary btn-form">1</button>
<button type="button" class="btn btn-secondary btn-form">2</button>
<button type="button" class="btn btn-secondary btn-form">4</button>
<button type="button" class="btn btn-secondary btn-form">6</button>
</div>
</div>
<div class="rates">
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句