jquery - 如何使用 jQuery 组合 5 个单独的函数？
问题描述
我有 5 个带有 5 个按钮的单独选择菜单。选择选项后，显示的价格和按钮的URL相应地更改。
目前，我正在使用id。我怀疑如果我改用类，脚本可以循环查看更改了哪个选择菜单并更改指定的显示价格和按钮的 url。但我不知道该怎么做。如何简化此代码？谢谢。
$(document).ready(function() {
$("select.license_1").change(function() {
var selection = $(this).children("option:selected").val();
var theid = $(this).children(":selected").attr("id");
$("#theurl_1").attr("href", "https://example.com/cart?cart!" + selection);
$("#amount_1").text(theid);
});
$("select.license_2").change(function() {
var selection = $(this).children("option:selected").val();
var theid = $(this).children(":selected").attr("id");
$("#theurl_2").attr("href", "https://example.com/cart?cart!" + selection);
$("#amount_2").text(theid);
});
$("select.license_3").change(function() {
var selection = $(this).children("option:selected").val();
var theid = $(this).children(":selected").attr("id");
$("#theurl_3").attr("href", "https://example.com/cart?cart!" + selection);
$("#amount_3").text(theid);
});
$("select.license_4").change(function() {
var selection = $(this).children("option:selected").val();
var theid = $(this).children(":selected").attr("id");
$("#theurl_4").attr("href", "https://example.com/cart?cart!" + selection);
$("#amount_4").text(theid);
});
$("select.license_5").change(function() {
var selection = $(this).children("option:selected").val();
var theid = $(this).children(":selected").attr("id");
$("#theurl_5").attr("href", "https://example.com/cart?cart!" + selection);
$("#amount_5").text(theid);
});
});<div>
<div class="largearialnorm" style="padding-bottom:5px;">Blue Widget</div>
<span class="largearial" id="amount_1">$39</span>
<select class="tftextinput4 license_1">
<option value="family1=596" selected="selected" id="$39">1 License</option>
<option value="package1=1600" id="$51.92">2 Licenses</option>
<option value="package1=1601" id="$69.83">5 Licenses</option>
<option value="package1=1602" id="$119.70">10 Licenses</option>
<option value="package1=1603" id="$249.38">25 Licenses</option>
</select>
<a class="downloadbtn" id="theurl_1" href="https://example.com/cart?&family1=596">Order</a>
</div>
<br>
<div>
<div class="largearialnorm" style="padding-bottom:5px;">Red Widget</div>
<span class="largearial" id="amount_2">$29</span>
<select class="tftextinput4 license_2">
<option value="family1=356" selected="selected" id="$29">1 License</option>
<option value="package1=11465" id="$51.92">2 Licenses</option>
<option value="package1=341" id="$69.83">5 Licenses</option>
<option value="package1=732" id="$119.70">10 Licenses</option>
<option value="package1=9801" id="$249.38">25 Licenses</option>
</select>
<a class="orderbtn" id="theurl_2" href="https://example.com/cart?&family1=356">Order</a>
</div>
<br>
<div>
<div class="largearialnorm" style="padding-bottom:5px;">Green Widget</div>
<span class="largearial" id="amount_3">$89</span>
<select class="tftextinput4 license_3">
<option value="family1=7893" selected="selected" id="$89">1 License</option>
<option value="package1=100" id="$105.92">2 Licenses</option>
<option value="package1=102" id="$167.83">5 Licenses</option>
<option value="package1=103" id="$220.70">10 Licenses</option>
<option value="package1=104" id="$305.38">25 Licenses</option>
</select>
<a class="orderbtn" id="theurl_3" href="https://example.com/cart?&family1=7893">Order</a>
</div>
<br>
<div>
<div class="largearialnorm" style="padding-bottom:5px;">Orange Widget</div>
<span class="largearial" id="amount_4">$19</span>
<select class="tftextinput4 license_4">
<option value="family1=596" selected="selected" id="$19">1 License</option>
<option value="package1=1600" id="$31.92">2 Licenses</option>
<option value="package1=1601" id="$59.83">5 Licenses</option>
<option value="package1=1602" id="$119.70">10 Licenses</option>
<option value="package1=1603" id="$249.38">25 Licenses</option>
</select>
<a class="orderbtn" id="theurl_4" href="https://example.com/cart?&family1=596">Order</a>
</div>
<br>
<div>
<div class="largearialnorm" style="padding-bottom:5px;">Blue Widget</div>
<span class="largearial" id="amount_5">$29</span>
<select class="tftextinput4 license_5">
<option value="family1=6732" selected="selected" id="$29">1 License</option>
<option value="package1=9562" id="$33.92">2 Licenses</option>
<option value="package1=542" id="$49.43">5 Licenses</option>
<option value="package1=8746" id="$209.70">10 Licenses</option>
<option value="package1=1473" id="$219.29">25 Licenses</option>
</select>
<a class="orderbtn" id="theurl_5" href="https://example.com/cart?&family1=6732">Order</a>
</div>解决方案
next()您可以在这里有效地使用 jQuery prev()。我还用数据属性替换了你id的使用。它比id用来保存数据更合适。
$(document).ready(function() {
//Change the following selector if needed
$("select.tftextinput4").change(function() {
//Get the selected value
var selection = $(this).val();
//Get the price from the data attribute
var price = $(this).children(":selected").data("price");
//Update the NEXT order button
$(this).next(".orderbtn").attr("href", "https://example.com/cart?cart!" + selection);
//Update the PREVIOUS span
$(this).prev("span").text(price);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="largearialnorm" style="padding-bottom:5px;">Blue Widget</div>
<span class="largearial" id="amount_1">$39</span>
<select class="tftextinput4 license_1">
<option value="family1=596" selected="selected" data-price="$39">1 License</option>
<option value="package1=1600" data-price="$51.92">2 Licenses</option>
<option value="package1=1601" data-price="$69.83">5 Licenses</option>
<option value="package1=1602" data-price="$119.70">10 Licenses</option>
<option value="package1=1603" data-price="$249.38">25 Licenses</option>
</select>
<a class="orderbtn" id="theurl_1" href="https://example.com/cart?&family1=596">Order</a>
</div>
<br>
<div>
<div class="largearialnorm" style="padding-bottom:5px;">Red Widget</div>
<span class="largearial" id="amount_2">$29</span>
<select class="tftextinput4 license_2">
<option value="family1=356" selected="selected" data-price="$29">1 License</option>
<option value="package1=11465" data-price="$51.92">2 Licenses</option>
<option value="package1=341" data-price="$69.83">5 Licenses</option>
<option value="package1=732" data-price="$119.70">10 Licenses</option>
<option value="package1=9801" data-price="$249.38">25 Licenses</option>
</select>
<a class="orderbtn" id="theurl_2" href="https://example.com/cart?&family1=356">Order</a>
</div>
<br>
<div>
<div class="largearialnorm" style="padding-bottom:5px;">Green Widget</div>
<span class="largearial" id="amount_3">$89</span>
<select class="tftextinput4 license_3">
<option value="family1=7893" selected="selected" id="$89">1 License</option>
<option value="package1=100" data-price="$105.92">2 Licenses</option>
<option value="package1=102" data-price="$167.83">5 Licenses</option>
<option value="package1=103" data-price="$220.70">10 Licenses</option>
<option value="package1=104" data-price="$305.38">25 Licenses</option>
</select>
<a class="orderbtn" id="theurl_3" href="https://example.com/cart?&family1=7893">Order</a>
</div>
<br>
<div>
<div class="largearialnorm" style="padding-bottom:5px;">Orange Widget</div>
<span class="largearial" id="amount_4">$19</span>
<select class="tftextinput4 license_4">
<option value="family1=596" selected="selected" data-price="$19">1 License</option>
<option value="package1=1600" data-price="$31.92">2 Licenses</option>
<option value="package1=1601" data-price="$59.83">5 Licenses</option>
<option value="package1=1602" data-price="$119.70">10 Licenses</option>
<option value="package1=1603" data-price="$249.38">25 Licenses</option>
</select>
<a class="orderbtn" id="theurl_4" href="https://example.com/cart?&family1=596">Order</a>
</div>
<br>
<div>
<div class="largearialnorm" style="padding-bottom:5px;">Blue Widget</div>
<span class="largearial" id="amount_5">$29</span>
<select class="tftextinput4 license_5">
<option value="family1=6732" selected="selected" data-price="$29">1 License</option>
<option value="package1=9562" data-price="$33.92">2 Licenses</option>
<option value="package1=542" data-price="$49.43">5 Licenses</option>
<option value="package1=8746" data-price="$209.70">10 Licenses</option>
<option value="package1=1473" data-price="$219.29">25 Licenses</option>
</select>
<a class="orderbtn" id="theurl_5" href="https://example.com/cart?&family1=6732">Order</a>
</div>推荐阅读
- python - 如何为我的 TensorFlow 聊天机器人制作 GUI？
- c - 我可以将 printf 与 PSTR 一起使用吗？
- reactjs - 如何在反应中在innerHTML中设置onclick功能？
- android - 无论我将什么类型的附件添加到信标中，getBeaconState() 都返回 null
- deep-learning - 在论文“Hierarchical Attention Networks for Document Classification”中查找数据集
- postgresql - 如何使用 Criteria API 进行联合查询搜索
- apache-spark - SparkSql：保持右数据集边界的左外连接的有效方法
- java - 访问 JMH 状态
- javascript - 使用 jQuery 动态设置输入值
- spring-rabbit - 如何在使用 DirectMessageListenerContainer 连接到 rabbitMQ 时处理连接侦听器异常