根据到期日计算输入字段

Question

包含50个条目的表单:每个表单包含P1-48,E1-48和X1-48.我想根据过期日期X1计算入场费"E1".到期日的js日期格式为YYYY.MM.DD,例如.2018.04.21并且如果玩家的到期日期大于或等于今天的日期,则玩家支付3美元.如果他的到期日期较早或低于今天的日期,他将支付5美元.但如果到期日期为空白并且玩家支付会员费,则免收入场费为零.

JS:

<script src = "js/moment.min.js"></script>

我也将此作为"模板"入门指南.我认为它可以被修改并将目标结果搭载到它上面.

<script> // change expiration date color
function getExpireDate(ele) {
var i = null;
for (i = 0; members.length > i; i++) {
    if (members[i].Name == ele.value) {
        var exDate = moment(members[i].Expires, 'YYYY.MM.DD');
        if (moment().isAfter(exDate)) {
        $(ele).closest('.universal').find('.expDate').css('color', "#A3005B");
        } else {
        $(ele).closest('.universal').find('.expDate').css('color', "#275052");
        }
        return members[i].Expires;
     }
}
return '';
}
</script>

<script>

for (let i = 0; i <= 48; i++) {
    $("#P" + i).on("blur", function(){
    $("#X" +i).val(getExpireDate(this));
    });
}
</script>

<script>

    var members [
    {"Name": "Jones, David", "Expires": "2017.05.03" },
    {"Name": "Roth, Bill", "Expires": "2017.03.08" },
    {"Name": "Scullin, Kenn", "Expires": "2019.02.20" }
    ]

<script>

HTML:

<div>
    <input type = "text" id = "P1"> <!--Player-->
    <input type = "text" id = "E1"> <!--Entry Fee--> 
    <input type = "text" id = "M1"> <!--Membership Fee--> 
<input type = "text" id = "X1" onblur="getExpireDate()" class="expDate"> <!--expires-->
<div>

有趣的是:

<input type = "text" onblur="getClass()" class="text" id="Y1" maxlength = "4" size = "4" disabled /> <!--works even with input disabled -->

<input type = "text" onblur="calcEntryFee(this);" class="expDate" name = "exp" id="X1" maxlength = "10" size = "10" disabled /><!--new code doesn't work -->

<script> // Lookup class or rating

function getClass(ele) {
var i = null;
for (i = 0; members.length > i; i++) {
if (members[i].Name == ele.value) {
return members[i].Rating;

}
}
return;
}


for (let i = 0; i <= 48; i++) {
$("#P" + i).on("blur", function(){
$("#Y" +i).val(getClass(this));
});
}
</script>

Answer 1

这个怎么样：

（主要function是calcEntryFee()。）

var members = [
  // ... fill data here.
];

function getMemberData( name ) {
    var a = jQuery.trim( name ).toLowerCase(),
        i, b, member;

    for ( i = 0; i < members.length; i++ ) {
        b = jQuery.trim( members[ i ].Name ).toLowerCase();
        if ( a === b ) {
            member = members[ i ];
            break;
        }
    }

    return member || {};
}

function calcEntryFee( elem ) {
    var idx, member, exDate, today, fee;

    elem = elem || {};
    if ( /^[PEMX](\d+)$/.test( elem.id ) ) {
        idx = RegExp.$1;
    } else {
        return false;
    }

    member = getMemberData( jQuery( '#P' + idx ).val() );
    mmfee = parseFloat( jQuery( '#M' + idx ).val() );
    exDate = moment( member.Expires, 'YYYY.MM.DD' );
    today = moment();
    fee = '';

    if ( exDate.isBefore( today ) ) {
        fee = 5;
    } else if ( exDate.isSameOrAfter( today ) ) {
        fee = 3;
    } else if ( ! member.Expires && mmfee > 0 ) {
        fee = 0;
    }

    // Updates the entry fee input value.
    jQuery( '#E' + idx ).val( fee );

    return fee;
}

你会calcEntryFee()这样使用：

<input id="X1" placeholder="X" size="10" onblur="calcEntryFee( this );" />

查看完整代码并尝试在https://codepen.io/anon/pen/WJRNVY上进行现场演示。

更新

由于到期日期字段/input已禁用，请改用此值：（记下该id值，也可以是P2、P3等）

<input id="P1" placeholder="P" onblur="calcEntryFee( this );" />

即添加calcEntryFee( this );到onblur“玩家”字段的属性，而不是到期日期字段。或者将其添加到任何未禁用的同级/相关字段中，或者我们可以使用 Tab 键切换到的字段。（这样我们就可以在字段上聚焦和“取消聚焦”或模糊，然后浏览器将调用calcEntryFee( this );附加到字段blur事件的 。）

尝试现场演示： https: //codepen.io/anon/pen/xjgQyx

或者，您可以在不使用 onblur/field的属性的情况下添加它input：（请参阅您在问题中提供的代码）

for (let i = 0; i <= 48; i++) {
  $("#P" + i).on("blur", function() {
    $("#X" + i).val(getExpireDate(this));
    calcEntryFee(this); // <- add it here
  });
}