gpt4 book ai didi

jquery - 无法在jquery中使用动态值更改输入的宽度

转载 作者:太空宇宙 更新时间:2023-11-03 21:07:43 25 4
gpt4 key购买 nike

我添加了 <input type="text">并设置其静态宽度。 total的input值是动态来的,也是有静态宽度的。

问题陈述: 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 上不起作用..但在这种情况下..值是动态的,不会在按键或 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>

最佳答案

你可以尝试这样做:

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

关于jquery - 无法在jquery中使用动态值更改输入的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50928309/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com