Question

我试图使用jQuery动态调整输入字段的大小，我的函数可以工作但是对每个输入应用相同的值，而不是每个输入的宽度被独立声明。任何人都可以看到我可能做错了什么？

的jQuery

function inputSize(){
   var inputContainer = $('.input-style').width();
   var labelWidth = $('.input-style label').width() + 40; // 40 is the padding + margin
   var inputNewSize = inputContainer - labelWidth;    
   $('.input-style input').css('width', inputNewSize);
}

inputSize();

http://jsfiddle.net/r76cgn6a/

Answer 1

您可以轻松地将您的函数转换为.each的参数。根据具体情况，只需将您的选择器更改为$(this)或$(this).find：

function inputSize(){
    var inputContainer = $(this).width();
    var labelWidth = $(this).find('label').width() + 40; // 40 is the padding + margin
    var inputNewSize = inputContainer - labelWidth;    
    $(this).find('input').css('width', inputNewSize);
}

$('.input-style').each(inputSize);

<强> Fiddle

Answer 2

您的代码未考虑每个input元素的上下文;使用this引用目标父元素和label元素。像这样使用.width(function() { .. })：

$('.input-style input').width(function() {
    return $(this).parent().width() - $(this).parent().find('label').width() - 40;
});

DEMO，DEMO

，因为您可能无法重新使用已定义的函数，因此您可能希望将代码更改为：

$(function() {
    $('.input-style input').width(function() {
        return $(this).parent().width() - $(this).parent().find('label').width() - 40;
    });
});

DEMO

Answer 3

使用$（＆＃39; .input-style＆＃39;）。width（）将只占用第一个元素宽度。

如果有很多元素，那么你需要使用.each函数，然后在你的代码中使用$（this）：

$(".input-style").each(function(index,item){
    var inputContainer = $(this).width();
    var labelWidth = $(this).find("label").width() + 40; // 40 is the padding + margin
    var inputNewSize = inputContainer - labelWidth;    
    $(this).find("input").css('width', inputNewSize);
});

Answer 4

将代码更改为使用.each方法，该方法逐个获取同一个css类的所有元素：

＆＃13;

$(.input-style).each(function inputSize(){
    var inputContainer = $('.input-style').width();
    var labelWidth = $('.input-style label').width() + 40; // 40 is the padding + margin
    var inputNewSize = inputContainer - labelWidth;    
    $('.input-style input').css('width', inputNewSize);
});

inputSize();

＆＃13;

body {font-size:10px;}

.input-style {
    background: #e7e7e7;
    overflow: hidden;
    padding: 10px;
}
.input-style label {
    margin-right: 20px;
    font-family:'Raleway', sans-serif;
    font-weight: 400;
  
    font-style: italic;
    color: #818181;
    font-size: 1.8em;
    float: left;
}
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}
.input-style input {
    margin-right: 20px;
    font-family:'Raleway', sans-serif;
      background:yellow;
    font-weight: 400;
    font-style: italic;
    color: #818181;
    font-size: 1.8em;
    outline: 0;
    padding: 0;
    border: 0;
}

＆＃13;

<div class="input-style">
    <label>Name*</label>
    <input data-val="true" data-val-length="The field name must be a string with a maximum length of 500." data-val-length-max="500" data-val-required="Please complete this field" id="Name" name="Name" required="required" type="text" value="">
</div>
<div class="input-style">
    <label>Confirm Password*</label>
    <input data-val="true" data-val-equalto="passwords do not match" data-val-equalto-other="*.Password" data-val-length="The field re-enter password must be a string with a maximum length of 50." data-val-length-max="50" data-val-required="Please complete this field" id="ComparePassword" name="ComparePassword" required="required" type="password" value="">
</div>

＆＃13;

将功能单独应用于所有项目？

4 个答案: