我有一个元素列表，其中的内容是用php从数据库中生成的(我可以乘以它们的值(。我希望它们具有最宽元素的宽度——它应该在页面加载时更新，并单击select标记(乘以值(。该脚本适用于页面加载，但当我单击select标记时，它不会更新宽度。此外，当最宽的元素收缩时，宽度不会收缩到应有的程度，而是保持与以前相同。
<head>
<script src="script.js" defer></script>
</head>
<select class="multiply_ing">
<option value="0.5">0.5x</option>
<option value="1" selected>1x</option>
<option value="5">5x</option>
<option value="10">10x</option>
</select>
// it looks like this - data-val generated from php <p class='ing_wght' data-val='$ing_weight'></p>
<p class='ing_wght' data-val='33'></p>
<p class='ing_wght' data-val='54'></p>
<p class='ing_wght' data-val='7312'></p>
<p class='ing_wght' data-val='6'></p>
// js/jquery code for multiplying is in the same file (above this one) as the script to change the width
$(".multiply_ing").on("click", function(){
ingWidth();
});
$(window).on("load", function(){
ingWidth();
});
function ingWidth(){
let maxWidth = 0;
let widestIngWght = null;
let ingWght;
$(".ing_wght").each(function(){
ingWght = $(this);
if(ingWght.width() > maxWidth){
maxWidth = ingWght.width();
widestIngWght = ingWght;
}
});
$(".ing_wght").css("width", maxWidth);
console.log(maxWidth);
}
如何解决这些问题？
更改：
$(".multiply_ing").on("click", function(){
ingWidth();
});
收件人：
$(document).on("change", ".multiply_ing", function(){
ingWidth();
});
这应该行得通。
所以我找到了解决方案。我必须添加一个if语句，如果类$(this)的宽度大于或等于之前定义的最大宽度，则该语句将删除该宽度。
$(".multiply_ing").on("click", function(){
ingWidth();
});
$(window).on("load", function(){
ingWidth();
});
function ingWidth(){
let maxWidth = 0;
let widestIngWght = null;
let ingWght;
$(".ing_wght").each(function(){
ingWght = $(this);
if(ingWght.width() >= maxWidth){
ingWght.width("");
}
if(ingWght.width() > maxWidth){
maxWidth = ingWght.width();
widestIngWght = ingWght;
}
});
$(".ing_wght").css("width", maxWidth);
}
也许这对将来的某个人有帮助。