Как уменьшить и увеличить значение текстового поля?

ProgramBox

Как уменьшить и увеличить значение текстового поля?

Post author:admin
Запись опубликована:4 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

У меня есть форма бронирования рейса, которая принимает ввод количества путешественников. Я создал 3 текстовых поля, в каждом из которых указано количество путешественников для взрослых, детей и младенцев, и основное текстовое поле, чтобы показать в нем конечный результат, однако это не работает.

Вот мой фрагмент кода:

 $(function() {
  $(".button-click a").on("click", function() {

    var $button = $(this);
    var oldValue = $button.closest("ul").prev().val();

    if ($button.text() == " ") {
      var newVal = parseInt(oldValue)   1;

    } else {
      // Don't allow decrementing below zero
      if (oldValue > 0) {
        var newVal = parseInt(oldValue - 1);
      } else {
        newVal = 0;
      }
    }
    $button.closest("ul").prev().val(newVal);
    var total_value = 0;
    $(".cat_textbox").each(function() {
      total_value  = parseInt($(this).val());
    });
    $(".main").val(total_value);
  })
});

 <html>
<head>
  <title>Input Number Incrementer</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>

<body>
  <label>
    Count all1 Traveller(s)
    <input type="text" class="main" value="0" placeholder="" />
  </label>
  <br/>
  <br/>
  <label>
    Adults
    <ul class="button-group button-click">
      <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide"> </span></i></a>
      </li>
      <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
      <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a>
      </li>
    </ul>
  </label>

  <label>
    Children
    <ul class="button-group button-click">
      <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide"> </span></i></a>
      </li>
      <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
      <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a>
      </li>
    </ul>
  </label>

  <label>
    Infants
    <ul class="button-group button-click">
      <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide"> </span></i></a>
      </li>
      <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
      <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a>
      </li>
    </ul>
  </label>
</body>
</html>

1. Разметка недопустима <ul><li></li><input /><li></li></ul> . И $button.closest("ul").prev(); ничего не найдет: .prev()

2. Итак, как я могу это изменить, пожалуйста?

3. Это зависит от фиксированной разметки

Ответ №1:

У вас может быть 2 разных обработчика для и - и поиска ввода с помощью this

 $(function() {
  registerEvents();
});

function registerEvents(){
  $('.button-group .fa-plus').on('click', function(){
    var input = $(this).closest('li').next()
    input.val( input.val()   1);
    updateTravellerCount();
    return false;
  })
  $('.button-group .fa-minus').on('click', function(){
    var input = $(this).closest('li').prev()
    var val =  input.val() > 0 ?  input.val() - 1 : 0
    input.val(val);
    updateTravellerCount();
    return false;
  });
}

function updateTravellerCount(){
  var total = 0;
  $.each($('.button-group input'), function(){
    total  =  $(this).val();
  });
  $('.main').val(total)
}

 <html>
<head>
  <title>Input Number Incrementer</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>

<body>
  <label>
    Count all1 Traveller(s)
    <input type="text" class="main" value="0" placeholder="" />
  </label>
  <br/>
  <br/>
  <label>
    Adults
    <ul class="button-group button-click">
      <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide"> </span></i></a>
      </li>
      <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
      <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a>
      </li>
    </ul>
  </label>

  <label>
    Children
    <ul class="button-group button-click">
      <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide"> </span></i></a>
      </li>
      <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
      <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a>
      </li>
    </ul>
  </label>


  <label>
    Infants
    <ul class="button-group button-click">
      <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide"> </span></i></a>
      </li>
      <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
      <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a>
      </li>
    </ul>
  </label>
</body>

</html>

Я попытался сделать его более модульным. Не лучшая моя попытка, но может помочь JSFiddle

Ответ №2:

Вы используете селектор ".button-click a" , который должен быть ".button-click > a"

которое обозначало бы a элемент элементом с классом button-click в качестве родительского

Ответ №3:

Я добавил два разных класса к тегам привязки и отформатировал jQuery, чтобы все было чисто и просто.

Демонстрация Plnkr:

http://plnkr.co/edit/GqOeRWaaAq8BjeQSVDHc?p=preview

Фрагмент стека:

   $(function() {
  $(".button-click a").on("click", function() {

    var $button = $(this);
    var oldValue = $button.closest("ul").children('input').val();

    if ($button.hasClass('plus')) {
      
      var newVal = parseInt(oldValue)  1;

    } else {
      // Don't allow decrementing below zero
      if (oldValue > 0) {
        var newVal = parseInt(oldValue - 1);
      } else {
        newVal = 0;
      }
    }
    $button.closest("ul").children('input').val(newVal)
    var total_value = 0;
    $(".cat_textbox").each(function(){
      total_value  = parseInt($(this).val());
    });
    $(".main").val(total_value);
  })
});

 <!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  </head>

  <body>
    <label>
Count all1 Traveller(s)
      <input class="main" value="0" placeholder="" type="text" />
    </label>
    <br />
    <br />
    <label>
Adults
       <ul class="button-group button-click">
        <li>
          <a href="#" class="small button secondary plus">
            <i class="fa fa-plus">
              <span class="hide"> </span>
            </i>
          </a>
        </li>
        <input class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" type="text" />
        <li>
          <a href="#" class="small button secondary minus">
            <i class="fa fa-minus">
              <span class="hide">-</span>
            </i>
          </a>
        </li>
      </ul>
    </label>
    <label>
  Children 
         <ul class="button-group button-click">
        <li>
          <a href="#" class="small button secondary plus">
            <i class="fa fa-plus">
              <span class="hide"> </span>
            </i>
          </a>
        </li>
        <input class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" type="text" />
        <li>
          <a href="#" class="small button secondary minus">
            <i class="fa fa-minus">
              <span class="hide">-</span>
            </i>
          </a>
        </li>
      </ul>
    </label>
    <label>
   Infants  
         <ul class="button-group button-click">
        <li>
          <a href="#" class="small button secondary plus">
            <i class="fa fa-plus">
              <span class="hide"> </span>
            </i>
          </a>
        </li>
        <input class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" type="text" />
        <li>
          <a href="#" class="small button secondary minus">
            <i class="fa fa-minus">
              <span class="hide">-</span>
            </i>
          </a>
        </li>
      </ul>
    </label>
  </body>

</html>

Ответ №4:

У некоторых старых браузеров могут возникнуть проблемы с <input type="number" почему бы вам не попробовать что-то вроде этого :

 <html>
<head>
<title>Input Number Incrementer</title>
</head>
<body>
<label>
Count all1 Traveller(s)
<input type="text" class="main" value="0" placeholder="" />
</label>
<br/><br/>
<label>
Adults
 <ul class="button-group button-click">
  <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide"> </span></i></a></li>
  <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
  <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
  </ul>
  </label>
  
  <label>
  Children 
   <ul class="button-group button-click">
  <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide"> </span></i></a></li>
   <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
  <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
  </ul>
  </label>
  
  
    <label>
   Infants  
   <ul class="button-group button-click">
  <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide"> </span></i></a></li>
   <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
  <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
  </ul>
  </label>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script>
      $(function() {
  $(".button-click a").on("click", function() {

    var $button = $(this);
    var input  = $button.closest("ul").find("input");
    var oldValue = parseInt(input.val());
    var newVal = 0;
    var total_value = 0;

    if ($button.text() == " ") {
       newVal = parseInt(oldValue)  1;

    } else {
      // Don't allow decrementing below zero
      if (oldValue > 0) {
         newVal = parseInt(oldValue - 1);
      } else {
        newVal = 0;
      }
    }

    $(input).val(newVal);
    
    $(".cat_textbox").each(function(){
       total_value  = parseInt($(this).val());
    });

    $(".main").val(total_value);
  });
});
  </script>
  </body>

</html>

Ответ №5:

Попробуйте это: Я немного изменил вашу существующую функцию.

 $(function() {
   $(".button-click a").on("click", function() {
   var $button = $(this);
   var mainCount=$('.main').val();
   var bText= $button.text();
   var oldVal=$button.closest("ul").children('input').val();
   var nexVal=null;

   if(bText==' '){
      nexVal=parseInt(oldVal)  1;
      mainCount=parseInt(mainCount)  1;
   }else{
      nexVal=parseInt(oldVal) -1;
      mainCount=parseInt(mainCount) -1;
   }

  $button.closest("ul").children('input').val(nexVal);
  $('.main').val(mainCount);
  });
});