如何按百分比增加或减少所有字段值？

Question

$("button").on("click",function(){ 
 
    var $this=$(this); 
 
    var Per=$(".per").val(); 
 
    $(".anuzau").each(function(){ 
 
     var Val=$(this).val(); 
 
     if($this.hasClass("zau")) 
 
     $(this).val((((Val/100)*Per)+parseInt(Val)).toFixed(2)); 
 
     else if($this.hasClass("anu")) 
 
     $(this).val((parseInt(Val)-((Val/100)*Per)).toFixed(2)); 
 
    }); 
 
});

.anuzau{width:200px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="anu">-</button> <input class="per" type="text" size="6" value="0">% 
 
<button class="zau">+</button> 
 
<br><br> 
 
<input type="text" size="6" class="anuzau" name="name" value="38.5"><br> 
 
<input type="text" size="6" class="anuzau" name="name" value="75"><br> 
 
<input type="text" size="6" class="anuzau" name="name" value="100">

我要递增/递减通过类名的所有值（ANU劭），任何人都可以分享我的jQuery的方法？我已经尝试了很多教程。 我是新来的，如果有什么不对，请大家指正。

<button class="anu">-</button> <input type="text" size="6" value="">% 
 
<button class="zau">+</button> 
 
<br><br> 
 

 
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="50"></td><br> 
 
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="200"></td><br> 
 
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="530"></td>

Answer 1

这应该让你开始。尚不清楚你在找什么精度（相应调整decimal_points）

var decimal_points = 2 
 

 
$('button').click(function(){ 
 
    var pVal = $('#percent').val(), 
 
    percent = pVal && !isNaN(pVal) ? +pVal/100 : 0; 
 
    //make it negative if anu button clicked 
 
    if($(this).hasClass('anu')){ 
 
    percent = 0-percent; 
 
    } 
 
    $('input.anu').val(function(_, val){ 
 
    // make sure input has numeric value 
 
    if(!val || isNaN(val)){ 
 
     return val; 
 
    }else{ 
 
     return (+val + (val * percent)).toFixed(decimal_points); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="anu">-</button> <input id="percent" type="number" size="6" value="">% 
 
<button class="zau">+</button> 
 
<br><br> 
 

 
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="50"></td><br> 
 
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="200"></td><br> 
 
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="530"></td>

Answer 2

$("button").on("click",function(){ 
 
    var $this=$(this); 
 
    var Per=$(".per").val(); 
 
    $(".anuzau").each(function(){ 
 
     var Val=$(this).val(); 
 
     if($this.hasClass("zau")) 
 
     $(this).val((((Val/100)*Per)+parseInt(Val))); 
 
     else if($this.hasClass("anu")) 
 
     $(this).val((parseInt(Val)-((Val/100)*Per))); 
 
    }); 
 
});

.anuzau{width:200px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="anu">-</button> <input class="per" type="text" size="6" value="0">% 
 
<button class="zau">+</button> 
 
<br><br> 
 
<input type="text" size="6" class="anuzau" name="name" value="50"><br> 
 
<input type="text" size="6" class="anuzau" name="name" value="200"><br> 
 
<input type="text" size="6" class="anuzau" name="name" value="530">