jquery обмен стоимости в корзине - PullRequest
Новая
       9

jquery обмен стоимости в корзине

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

Я написал код для корзины покупок. При этом для каждого изменения количественного значения (увеличения или уменьшения) должно происходить изменение цены. Я попытался реализовать это по снижающейся цене по отношению к количеству. Я могу изменить количество, но я не могу изменить поле цены, потому что цена все еще дает мне тип объекта как I console.log. Кто-нибудь может указать, что я делаю не так?

Ниже приведен код:

product. html

            <tr>
                <td class="product-thumbnail">
                  <img src="images/cloth_1.jpg" alt="Image" class="img-fluid">
                </td>
                <td class="product-name">
                  <h2 class="h5 text-black">Top Up T-Shirt</h2>
                </td>
                <!-- The price -->
                <td>$49.00</td>
                <td>
                  <div class="input-group mb-3" style="max-width: 120px;">
                    <div class="input-group-prepend">
                      <button class="btn btn-outline-primary js-btn-minus" type="button">&minus;</button>
                    </div>
                    <input type="text" class="form-control text-center" value="1" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
                      <div class="input-group-append">
                        <button class="btn btn-outline-primary js-btn-plus" type="button">&plus;</button>
                      </div>
                    </div>
                </td>
                <td>
                      <div class="price"></div>
                </td>
                <td><a href="#" class="btn btn-primary btn-sm">X</a></td>
              </tr>
              <tr>
                <td class="product-thumbnail">
                  <img src="images/cloth_2.jpg" alt="Image" class="img-fluid">
                </td>
                <td class="product-name">
                  <h2 class="h5 text-black ">Polo Shirt</h2>
                </td>
                <td>$49.00</td>
                <td>
                  <div class="input-group mb-3" style="max-width: 120px;">
                    <div class="input-group-prepend">
                      <button class="btn btn-outline-primary js-btn-minus" type="button">&minus;</button>
                    </div>
                    <input type="text" class="form-control text-center" value="1" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
                    <div class="input-group-append">
                      <button class="btn btn-outline-primary js-btn-plus" type="button">&plus;</button>
                    </div>
                  </div>
                </td>
                <td>
                    <div class="price">8</div>
                </td>
                <td><a href="#" class="remove btn btn-primary btn-sm">X</a></td>
              </tr>

main. js

    <script>
    $('.js-btn-minus').on('click', function(e)
        {
            e.preventDefault();
            if ( $(this).closest('.input-group').find('.form-control').val() !=0 && $(this).closest('.input-group').find('.form-control').val() >0)
            {
                $(this).closest('.input-group').find('.form-control').val(parseInt($(this).closest('.input-group').find('.form-control').val()) - 1);
                var va = parseInt($(this).closest('.input-group').find('.form-control').val());
                va = (parseInt(va));
                this.a = va;
                console.log(this.a);
                var price = $(this).closest('tr').find('.price');
                console.log(price.val(parseInt(this.a)));
            } 
        }
 </script>

Ответы [ 2 ]

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

Во-первых, ваш table плохо структурирован. Во-вторых, ваше требование не совсем понятно для меня.

Думаю, вы хотите увеличить или уменьшить цену, если класс равен price.

Вы получаете весь элемент так как вы используете val(), и он всегда будет объектом.

Если бы вы могли сказать точную проблему / требование, я могу вам помочь. 

$('.js-btn-minus').on('click', function(e)
{
    e.preventDefault();
    var next_val = parseInt($(this).closest('.input-group').find('.form-control').val()) - 1;
    if (next_val < 0){
      next_val = 0
      $(this).closest('.input-group').find('.form-control').val(0)
    }
    else{
      $(this).closest('.input-group').find('.form-control').val(next_val);
      var existing_value = $(this).closest('tr').find('.price').html()
    if ((existing_value || '') == ''){
      $(this).closest('tr').find('.price').html(next_val)
    }
    else{
      $(this).closest('tr').find('.price').html(existing_value - 1)
    }
    }
    
    // Price updates    
    //var current_price = parseInt($(this).closest('.input-group').parent().prev('td').html().replace('$', ''))
    //var final_price = current_price - next_val;    
    
});
$('.js-btn-plus').on('click', function(e)
{
    e.preventDefault();
    var next_val = parseInt($(this).closest('.input-group').find('.form-control').val()) + 1;
    if (next_val < 0){
    next_val=0;
      $(this).closest('.input-group').find('.form-control').val(0)
    }
    else{
      $(this).closest('.input-group').find('.form-control').val(next_val);
      var existing_value = parseInt($(this).closest('tr').find('.price').html())
    if ((existing_value || '') == ''){
      $(this).closest('tr').find('.price').html(next_val)
    }
    else{
      $(this).closest('tr').find('.price').html(existing_value + 1)
    }
    }
  // Price updates
    //var current_price = parseInt($(this).closest('.input-group').parent().prev('td').html().replace('$', ''))
    //var final_price = current_price + 1
    //console.log(final_price)
    

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
                <td class="product-thumbnail">
                  <img src="images/cloth_1.jpg" alt="Image" class="img-fluid">
                </td>
                <td class="product-name">
                  <h2 class="h5 text-black">Top Up T-Shirt</h2>
                </td>
                <!-- The price -->
                <td class="current_price">$49.00</td>
                <td>
                  <div class="input-group mb-3" style="max-width: 120px;">
                    <div class="input-group-prepend">
                      <button class="btn btn-outline-primary js-btn-minus" type="button">&minus;</button>
                    </div>
                    <input type="text" class="form-control text-center" value="1" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
                      <div class="input-group-append">
                        <button class="btn btn-outline-primary js-btn-plus" type="button">&plus;</button>
                      </div>
                    </div>
                </td>
                <td>
                      <div class="price"></div>
                </td>
                <td><a href="#" class="btn btn-primary btn-sm">X</a></td>
              </tr>
              <tr>
                <td class="product-thumbnail">
                  <img src="images/cloth_2.jpg" alt="Image" class="img-fluid">
                </td>
                <td class="product-name">
                  <h2 class="h5 text-black ">Polo Shirt</h2>
                </td>
                <td class="current_price">$49.00</td>
                <td>
                  <div class="input-group mb-3" style="max-width: 120px;">
                    <div class="input-group-prepend">
                      <button class="btn btn-outline-primary js-btn-minus" type="button">&minus;</button>
                    </div>
                    <input type="text" class="form-control text-center" value="1" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
                    <div class="input-group-append">
                      <button class="btn btn-outline-primary js-btn-plus" type="button">&plus;</button>
                    </div>
                  </div>
                </td>
                <td>
                    <div class="price">8</div>
                </td>
                <td><a href="#" class="remove btn btn-primary btn-sm">X</a></td>
              </tr>
              </table>
0 голосов
/ 04 февраля 2020

используйте цену. html или price.text вместо price.val и затем запомните, введите значение get с помощью .val (), а другой элемент - с помощью. html () или .text ()

...