代码之家  ›  专栏  ›  技术社区  ›  Khushbu Vaghela

在jquery中不能用动态值更改输入的宽度

  •  0
  • Khushbu Vaghela  · 技术社区  · 7 年前

    我已经添加了 <input type="text"> 并设置其静态宽度。total的输入值是动态的,它也有一个静态宽度。

    问题陈述: input of total has a static width 当数字增加时不会改变。我不想要静态宽度。 我想 动态更改其宽度 随着数字的变化。

    我试过的:

    $('#resizeme').keydown(function(){
     var contents = $(this).val();
     var charlength = contents.length;
     newwidth =  charlength*9;
     $(this).css({width:newwidth});
    });
    

    但是它并没有像在keydown上那样工作,但是在本例中……该值是动态的,在按键或按键时不会改变。

    这是我的代码:

    var $j = jQuery.noConflict();
    (function($j) {
      var primaryincome4 = $j("#addnumber4");
      var otherincome = $j(".totalamountremaining");
      $j(".calculate4").click(function() {
        var totalincome = parseInt(primaryincome4.val() || 0) + parseInt(otherincome.val() || 0);
        $j(".totalamountremaining").val(totalincome);
      })
      var primaryincome5 = $j("#addnumber5");
      $j(".calculate5").click(function() {
        var totalincome = parseInt(primaryincome5.val() || 0) + parseInt(otherincome.val() || 0);
        $j(".totalamountremaining").val(totalincome);
      })
    })(jQuery);
    .add {
      font-size: 40px;
      text-transform: uppercase;
      color: green;
      font-weight: 600;
      letter-spacing: 1px;
      /* margin-left: 20px; */
      width: 120px;
      cursor: pointer;
    }
    
    .dolorsign {
      font-size: 40px;
    }
    
    .primaryincome.priceleft {
      width: 45px !important;
    }
    
    .primaryincome {
      border: none;
      background: white !important;
      font-size: 40px;
      width: 90px !important;
      position: relative;
      top: 0px;
      margin: 0px !important;
      padding: 0px !important;
      /* display: inline-block; */
    }
    
    .super {
      font-size: 20px;
      position: relative;
      top: -20px;
    }
    
    .price-bold-total {
      width: 50px !important;
      text-align: center;
    }
    
    .plan-total-text {
      font-size: 15px;
      margin-right: 12px
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="plan wptask">
      <span class="plan-qty qtywidth">
    		<span class="add calculate5">
      			<i class="fa fa-plus-square-o" aria-hidden="true"></i>
      			<button>Add</button>
      		</span>
      <span class="dolorsign">$</span>
      <input value="39" id="addnumber5" class="primaryincome priceleft" disabled="" type="text">
      <span class="super">/month</span>
      </span>
    </div>
    <div class="plan yetadd designtask">
      <span class="plan-qty qtywidth">
    		<span class="add calculate4">
      			<i class="fa fa-plus-square-o" aria-hidden="true"></i>
      			<button>Add</button>
      		</span>
      <span class="dolorsign">$</span>
      <input value="1499" id="addnumber4" class="primaryincome" disabled="" type="text">
      <span class="super">/month</span>
      </span>
    </div>
    <span class="plan-total-text">TOTAL</span>
    <span class="dolorsign">$</span>
    <input class="totalamountremaining primaryincome priceleft2 price-bold-total" value="0" disabled="" id="txt" type="text">
    <span class="super">/month</span>
    3 回复  |  直到 7 年前
        1
  •  1
  •   Carsten Løvbo Andersen Dan Nemtanu    7 年前

    var $j = jQuery.noConflict();
    (function($j) {
      var primaryincome4 = $j("#addnumber4");
      var otherincome = $j(".totalamountremaining");
      $j(".calculate4").click(function() {
        var totalincome = parseInt(primaryincome4.val() || 0) + parseInt(otherincome.val() || 0);
        $j(".totalamountremaining").val(totalincome);
        $j(".totalamountremaining1").text(totalincome);
      })
      var primaryincome5 = $j("#addnumber5");
      $j(".calculate5").click(function() {
        var totalincome = parseInt(primaryincome5.val() || 0) + parseInt(otherincome.val() || 0);
        $j(".totalamountremaining").val(totalincome);
        $j(".totalamountremaining1").text(totalincome);
      })
    })(jQuery);
    .add {
      font-size: 40px;
      text-transform: uppercase;
      color: green;
      font-weight: 600;
      letter-spacing: 1px;
      /* margin-left: 20px; */
      width: 120px;
      cursor: pointer;
    }
    
    .dolorsign {
      font-size: 40px;
    }
    
    .primaryincome.priceleft {
      width: 45px !important;
    }
    
    .primaryincome {
      border: none;
      background: white !important;
      font-size: 40px;
      width: 90px !important;
      position: relative;
      top: 0px;
      margin: 0px !important;
      padding: 0px !important;
      /* display: inline-block; */
    }
    
    .super {
      font-size: 20px;
      position: relative;
      top: -20px;
    }
    
    .price-bold-total {
      width: 50px !important;
      text-align: center;
    }
    
    .plan-total-text {
      font-size: 15px;
      margin-right: 12px
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="plan wptask">
      <span class="plan-qty qtywidth">
    		<span class="add calculate5">
      			<i class="fa fa-plus-square-o" aria-hidden="true"></i>
      			<button>Add</button>
      		</span>
      <span class="dolorsign">$</span>
      <input value="39" id="addnumber5" class="primaryincome priceleft" disabled="" type="text">
      <span class="super">/month</span>
      </span>
    </div>
    <div class="plan yetadd designtask">
      <span class="plan-qty qtywidth">
    		<span class="add calculate4">
      			<i class="fa fa-plus-square-o" aria-hidden="true"></i>
      			<button>Add</button>
      		</span>
      <span class="dolorsign">$</span>
      <input value="1499" id="addnumber4" class="primaryincome" disabled="" type="text">
      <span class="super">/month</span>
      </span>
    </div>
    <span class="plan-total-text">TOTAL</span>
    <span class="dolorsign">$</span>
    <input class="totalamountremaining primaryincome priceleft2 price-bold-total" value="0" disabled="" id="txt" type="hidden">
    <span class="totalamountremaining1 primaryincome priceleft2 price-bold-total"> 0 </span>
    <span class="super">/month</span>
        2
  •  2
  •   Carsten Løvbo Andersen Dan Nemtanu    7 年前

      $j('.totalamountremaining').on("input", function() {
        var contents = $j(this).val();
        var charlength = contents.length;
        newwidth = charlength * 22;
        console.log(newwidth)
        $j(this).css({
          width: newwidth
        });
      });
    

    你最大的问题是使用 !important width: newwidth

    var $j = jQuery.noConflict();
    (function($j) {
      var primaryincome4 = $j("#addnumber4");
      var otherincome = $j(".totalamountremaining");
      $j(".calculate4").click(function() {
        var totalincome = parseInt(primaryincome4.val() || 0) + parseInt(otherincome.val() || 0);
        $j(".totalamountremaining").val(totalincome).trigger("input");
      })
      var primaryincome5 = $j("#addnumber5");
      $j(".calculate5").click(function() {
        var totalincome = parseInt(primaryincome5.val() || 0) + parseInt(otherincome.val() || 0);
        $j(".totalamountremaining").val(totalincome).trigger("input");
      })
      $j('.totalamountremaining').on("input", function() {
        var contents = $j(this).val();
        var charlength = contents.length;
        newwidth = charlength * 22;
        console.log(newwidth)
        $j(this).css({
          width: newwidth
        });
      });
    })(jQuery);
    .add {
      font-size: 40px;
      text-transform: uppercase;
      color: green;
      font-weight: 600;
      letter-spacing: 1px;
      /* margin-left: 20px; */
      width: 120px;
      cursor: pointer;
    }
    
    .dolorsign {
      font-size: 40px;
    }
    
    .primaryincome.priceleft {
      width: 45px !important;
    }
    
    .primaryincome {
      border: none;
      background: white !important;
      font-size: 40px;
      width: 90px;
      position: relative;
      top: 0px;
      margin: 0px !important;
      padding: 0px !important;
      /* display: inline-block; */
    }
    
    .super {
      font-size: 20px;
      position: relative;
      top: -20px;
    }
    
    .price-bold-total {
      width: 50px;
      text-align: center;
    }
    
    .plan-total-text {
      font-size: 15px;
      margin-right: 12px
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="plan wptask">
      <span class="plan-qty qtywidth">
    		<span class="add calculate5">
      			<i class="fa fa-plus-square-o" aria-hidden="true"></i>
      			<button>Add</button>
      		</span>
      <span class="dolorsign">$</span>
      <input value="39" id="addnumber5" class="primaryincome priceleft" disabled="" type="text">
      <span class="super">/month</span>
      </span>
    </div>
    <div class="plan yetadd designtask">
      <span class="plan-qty qtywidth">
    		<span class="add calculate4">
      			<i class="fa fa-plus-square-o" aria-hidden="true"></i>
      			<button>Add</button>
      		</span>
      <span class="dolorsign">$</span>
      <input value="1499" id="addnumber4" class="primaryincome" disabled="" type="text">
      <span class="super">/month</span>
      </span>
    </div>
    <span class="plan-total-text">TOTAL</span>
    <span class="dolorsign">$</span>
    <input class="totalamountremaining primaryincome priceleft2 price-bold-total" value="0" disabled="" id="txt" type="text">
    <span class="super">/month</span>
        3
  •  1
  •   Carsten Løvbo Andersen Dan Nemtanu    7 年前

    var $j = jQuery.noConflict();
    (function($j) {
      var primaryincome4 = $j("#addnumber4");
      var otherincome = $j(".totalamountremaining");
      $j(".calculate4").click(function() {
        var totalincome = parseInt(primaryincome4.val() || 0) + parseInt(otherincome.val() || 0);
        $j(".totalamountremaining").val(totalincome);
        setWidth();
      })
      var primaryincome5 = $j("#addnumber5");
      $j(".calculate5").click(function() {
        var totalincome = parseInt(primaryincome5.val() || 0) + parseInt(otherincome.val() || 0);
        $j(".totalamountremaining").val(totalincome);
        setWidth();
      })
    
      function setWidth() {
        var contents = $j(".totalamountremaining").val();
        var charlength = contents.length;
        newwidth = charlength * 25;
        $j(".totalamountremaining").attr('style', 'width: ' + newwidth + 'px !important;')
      }
    
    })(jQuery);
    .add {
      font-size: 40px;
      text-transform: uppercase;
      color: green;
      font-weight: 600;
      letter-spacing: 1px;
      /* margin-left: 20px; */
      width: 120px;
      cursor: pointer;
    }
    
    .dolorsign {
      font-size: 40px;
    }
    
    .primaryincome.priceleft {
      width: 45px !important;
    }
    
    .primaryincome {
      border: none;
      background: white !important;
      font-size: 40px;
      width: 90px !important;
      position: relative;
      top: 0px;
      margin: 0px !important;
      padding: 0px !important;
      /* display: inline-block; */
    }
    
    .super {
      font-size: 20px;
      position: relative;
      top: -20px;
    }
    
    .price-bold-total {
      width: 50px !important;
      text-align: center;
    }
    
    .plan-total-text {
      font-size: 15px;
      margin-right: 12px
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="plan wptask">
      <span class="plan-qty qtywidth">
    		<span class="add calculate5">
      			<i class="fa fa-plus-square-o" aria-hidden="true"></i>
      			<button>Add</button>
      		</span>
      <span class="dolorsign">$</span>
      <input value="39" id="addnumber5" class="primaryincome priceleft" disabled="" type="text">
      <span class="super">/month</span>
      </span>
    </div>
    <div class="plan yetadd designtask">
      <span class="plan-qty qtywidth">
    		<span class="add calculate4">
      			<i class="fa fa-plus-square-o" aria-hidden="true"></i>
      			<button>Add</button>
      		</span>
      <span class="dolorsign">$</span>
      <input value="1499" id="addnumber4" class="primaryincome" disabled="" type="text">
      <span class="super">/month</span>
      </span>
    </div>
    <span class="plan-total-text">TOTAL</span>
    <span class="dolorsign">$</span>
    <input class="totalamountremaining primaryincome priceleft2 price-bold-total" value="0" disabled="" id="txt" type="text">
    <span class="super">/month</span>