Question

我有一张预订航班表格，可以输入旅客人数。我创建了3个文本框，每个文本框包含成人，儿童和婴儿的旅行者数量，以及显示最终结果的主文本框，但它不起作用。

这是我的代码段：

＆＃13;

SELECT name, COUNT(rate) FROM RateTable
WHERE rating = 5
GROUP BY name
HAVING COUNT(rate) > 15
ORDER BY AVG(rate) ASC;

＆＃13;

$(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);
  })
});

＆＃13;

Answer 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

Answer 2

您使用的选择器".button-click a"应为".button-click > a"

表示a元素，其中元素button-click为父级

Answer 3

我已经为锚标签添加了两个不同的类，并对jQuery进行了格式化以保持简洁。

Plnkr演示：

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

Stack Snippet：

＆＃13;

let layer:CALayer = CALayer()
    let mask:UIImage = UIImage(named: "Black-Star-Photographic-Agency")!
    layer.contents = mask
    layer.frame = CGRect(x: 0, y: 0, width: ((self.defaultImageView.image?.size.width)!), height: (self.defaultImageView.image?.size.height)!)
    self.defaultImageView.layer.mask = layer
    self.defaultImageView.layer.masksToBounds = true

＆＃13;

  $(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);
  })
});

＆＃13;

Answer 4

某些较旧的浏览器可能会遇到<input type="number"问题，为什么不尝试这样的事情：

＆＃13;

<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>

＆＃13;

Answer 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);
  });
});

如何减少和增加文本框的值？

5 个答案: