$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;
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;
}
.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>