Как объединить 5 отдельных функций, используя jQuery? - PullRequest
Новая
       1

Как объединить 5 отдельных функций, используя jQuery?

0 голосов
/ 07 февраля 2020

У меня есть 5 отдельных меню выбора с 5 кнопками. Когда опция выбрана, отображаемая цена и URL кнопки изменяются соответственно.

В настоящее время я использую идентификаторы. Я подозреваю, что если бы я использовал классы вместо этого, скрипт мог бы циклически просматривать, какое меню выбора было изменено, и изменить указанную отображаемую цену и 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?&amp;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?&amp;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?&amp;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?&amp;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?&amp;family1=6732">Order</a>
</div>

Ответы [ 2 ]

0 голосов
/ 07 февраля 2020

Вы также можете объединить свой 5 function в одну функцию с помощью атрибута data- и установить это значение атрибута данных как amount id & url id после изменения файла событий, затем получить значение по split метод, так что вы также можете узнать, как использовать атрибут data-* для функций сокращения.
Я надеюсь, что приведенный ниже фрагмент поможет лоту. 

$(document).on('change', '[data-license]', function(){
  //from split method to get amout id and url id 
  var amoutUrl = $(this).attr('data-license').split(',');
  //Get the selected value
  var selectedValue = $(this).val();
  // Get price from data-price attribute
  var price = $(this).children(":selected").data("price");
  //set price amount -> amoutUrl[0] = amount id
  $(amoutUrl[0]).text(price);
  // set url -> amoutUrl[1] = url id
  $(amoutUrl[1]).attr("href", "https://example.com/cart?cart!" + selectedValue);  
});
<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 data-license="#amount_1,#theurl_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="downloadbtn" id="theurl_1" href="https://example.com/cart?&amp;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 data-license="#amount_2,#theurl_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?&amp;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 data-license="#amount_3,#theurl_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?&amp;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 data-license="#amount_4,#theurl_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?&amp;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 data-license="#amount_5,#theurl_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?&amp;family1=6732">Order</a>
</div>
0 голосов
/ 07 февраля 2020

Здесь вы можете эффективно использовать jQuery next() и prev(). Я также заменил использованный вами id на атрибут data . Он подходит лучше, чем 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?&amp;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?&amp;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?&amp;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?&amp;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?&amp;family1=6732">Order</a>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...