将功能分别应用于所有项目

Apply function to all items individually?

本文关键字：项目 应用于 功能      更新时间：2023-09-26

我尝试使用 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/

您可以轻松地将函数转换为 .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);

小提琴

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

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

，演示

由于您可能不会重用定义的函数，因此您可能希望将代码更改为：

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

演示

使用 $（'.input-style'）.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);
});

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

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

相关文章：