我有一个带有EXPIRATION输入日期字段的网络应用，其格式为YYYY.MM.DD，并且正在访问MEMBERS.JSON文件。查看玩家姓名作为密钥，并返回会员的到期日期。
如果日期早于今天，我想将css.color添加到日期字段，例如＆＃34; #FF0000＆＃34;和＆＃34; 00FF00＆＃ 34;如果今天或将来的日期相同。
请参阅：http://communitychessclub.com/cccr-pairing/accountEXP.html
我该怎么办呢？
$("#P46").on("blur", function(){
$("#X46").val(getExpireDate($(this).val()));
});
getExpireDate;
function getExpireDate(name) {
var i = null;
for (i = 0; members.length > i; i++) {
if (members[i].Name === name) {
return members[i].Expires;
}
}
return false;
};
答案 0 :(得分：1)
您可以更改 getExpireDate 的参数。此参数必须是当前元素而不是当前值。通过这种方式，在您的函数内部，您可以获得需要更改颜色的元素：
$(ele).closest('.universal').find('.expDate')
因此，请更改此行：
$("#P04").on("blur", function({$("#X04").val(getExpireDate($(this).val()));});
为：
$("#P04").on("blur", function(){
$("#X04").val(getExpireDate(this));
});
为了比较我使用momentjs库的日期：
var exDate = moment(members[i].Expires, 'YYYY.MM.DD');
if (moment().isAfter(exDate)) {
现在，您的功能变为：
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', "#FF0000");
} else {
$(ele).closest('.universal').find('.expDate').css('color', "#00FF00");
}
return members[i].Expires;
}
}
return 'not found';
}
我把你的输入减少到了＆＃39; Attaya，Jim＆＃39;和道，帕特里克＆＃39;
var members = [{"Name": "Ahmed, Jamshed", "Expires": "2019.10.05"}, {
"Name": "Attaya, Jim",
"Expires": "2018.01.12"
}, {"Name": "Tao, Patrick", "Expires": "2016.08.01"}, {
"Name": "Tarwid, Jan",
"Expires": "2018.03.21"
}];
var players = [
"Attaya, Jim",
"Tao, Patrick",
];
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', "#FF0000");
} else {
$(ele).closest('.universal').find('.expDate').css('color', "#00FF00");
}
return members[i].Expires;
}
}
return 'not found';
}
// Lookup date of expiration
$("#P04").on("blur", function(){
$("#X04").val(getExpireDate(this));
});
$( ".automplete-2" ).autocomplete({delay: 0, source: window.players, minLength: 1, autoFocus: true});body {background: #2E5363; font-family: Arial,Helvetica,sans-serif; letter-spacing:1px; color:#17263F; display: block;}
.container {display: flex; flex-direction: column; flex-wrap: nowrap; align-content:center; width:100%}
.box {width:100%; margin:auto;}
.easy-modal {display:none; }
.easy-modal, .easy-modal-animated {border-radius:1rem; position: relative; top: 15%; transform: translateY(-15%); font-size:1.3rem; width: 55%; font-align:justify; padding: 1rem 2rem; box-shadow: 1px 1px 3px rgba(0,0,0,0.35); background-color: tan; }
.arrow-right {display:inline; font-size:2rem; vertical-align:middle; color:#3F4749; font-weight:bold;}
#pairing {display:table; margin:0 auto; border-radius:2rem; padding:3rem 2rem; background:#ADC1C9; color:#F6FFDA; border:6px solid inherit; box-shadow: 3px 3px 6px rgba(0,0,0,0.3); width:auto}
.ui-widget {font-family: Arial,Helvetica,sans-serif; font-size: 1.4em;}
.ui-autocomplete {z-index: 10000000;}
ul.ui-autocomplete.ui-menu {background:pink; font-size:1.5rem; letter-spacing:2px;}
input {background:inherit; text-align:left; color:#3A3D2E;}
input:focus {background: #AA9491; color:#3A3D2E;}
.glasnost {display:inline; text-align:left; margin:0; margin-right:2rem; background:inherit; font-size:1.5rem !important; border:none;
height:2rem; line-height:2rem; vertical-align: middle; width:20rem; letter-spacing:1px; font-weight:normal; text-shadow: 1px 1px 1px #ccc;}
.glasnost input {display:inline-block; text-align:left; margin-right:2rem; background:#76B8D2; color:#294049; font-size:1.5rem; border:none !important; height:2rem; line-height:2rem; vertical-align: middle; width:20rem; letter-spacing:1px; font-weight:bold; padding:0.5rem 1rem; overflow:ellipsis}
.glasnost input:focus {background:#80A994; color:#F5FCFF; text-align:left; font-weight:bold; overflow:ellipsis}
#total_recall {display:table; margin:2rem auto; margin-top:-1rem; color:#ABB6C8; background:#5D71C9; padding:1rem 2rem; font-size:1.75rem; font-weight:normal; border-radius:0.75rem;box-shadow: 3px 3px 6px rgba(0,0,0,0.3);}
#revenue_totals {margin-right:2rem; color:#F6FFDA}
#memberships {margin-right:0; color:#F6FFDA}
#entrance_fees {margin-right:2rem; color:#F6FFDA}
.cucumber {display:inline; color:#3F4749; text-align:right; float:left; margin-top:0.25rem; margin-right:0.5rem; margin-left:1.0rem; font-size:1.2rem; font-weight:bold; line-height:1.5rem; height:1.5rem; vertical-align:middle; margin-top:0.55rem; width:1.5rem; position:relative; top:0.25rem;}
.cucumber::after {content: ".";}
.player div input {display:inline}
/*
.rating {display:inline; width:4rem; text-align:right; font-size:1.5rem; color:#465D51; vertical-align:middle; }
.rating input {display:inline; width:3rem; text-align:center; font-size:1.5rem; border:none; vertical-align:middle; margin-right:3rem; color:#3A3D2E}
.rating input:focus {background:#D78412; color:#3A3D2E}
.rating input:hover {background:#CC790D; color:#3A3D2E}
*/
.CLASS {display:inline; width:5rem; text-align:right; font-size:1.5rem; color:#3F4749; vertical-align:middle; }
.CLASS input {display:inline; width:5rem !important; text-align:center; font-size:1.5rem; border:none; vertical-align:middle; margin-right:3rem; color:#3A3D2E}
.CLASS input:focus {background:#D78412; color:#3A3D2E}
.CLASS input:hover {background:#CC790D; color:#3A3D2E}
.EF {display:inline; width:4rem; text-align:right; font-size:1.5rem; color:#3F4749; vertical-align:middle; }
.EF input {display:inline; width:3rem; text-align:center; font-size:1.5rem; border:none; vertical-align:middle; margin-right:3rem; color:#3A3D2E}
.EF input:focus {background:#D78412; color:#3A3D2E}
.EF input:hover {background:#CC790D; color:#3A3D2E}
.MEM {display:inline; width:6rem; text-align:right; font-size:1.5rem; color:#3F4749; vertical-align:middle; }
.MEM input {display:inline; width:3rem; text-align:center; font-size:1.5rem; border:none; color:#3A3D2E; vertical-align:middle; }
.EXP {display:inline; width:6rem; text-align:right; font-size:1.5rem; color:#3F4749; vertical-align:middle; margin-left:2rem !important;}
.EXP input {display:inline; width:8rem; text-align:center; font-size:1.5rem; border:none; color:#3A3D2E; vertical-align:middle; }
.fee_totals {border:none; font-size:1.75rem; background:inherit; color:#F6FFDA; width:3rem; line-height:2rem; height:2rem; position:relative; bottom:1px; margin:0;}
.player {margin-bottom:1rem}
.fee_setup {display:inline-block; vertical-align:middle;}
.fee_input {display:inline; line-height:2rem; height:2rem; border:none;}
input.fee:focus {background:#80A994; color:beige;}
.fee {border:none; font-size:1.5rem; background:#ABB6C8; line-height:2rem; height:2rem; padding:0.25rem 1rem; display:inline-block; vertical-align:middle;}
.fee_bank {display:inline;}
.number-B {display:table; color:#BCD2DB; text-align:left; float:right; margin-top:0.25rem; margin-left:-0.5rem; font-size:1.2rem; font-weight:bold; line-height:1.5rem; height:1.5rem; vertical-align:middle; margin-top:0.8rem; width:1.5rem;}
.ui-menu .ui-menu-item-wrapper {padding:0.50rem; box-sizing: inherit;}
/*.ui-menu .ui-menu-item { height:3rem; line-height:3rem; padding:0 !important;}*/
.ui-widget input:hover {background:#9CB7A9; color:inherit;}
/*input[type="text"].focus {border: solid 1px #969696;}*/
.ui-helper-hidden-accessible {display: none;}
.ui-menu .ui-menu-item-wrapper:hover {background:#696ECC;}
/*-------------------------------------------*/
#main {margin:0 auto; display:table; }
.arrow {font-size:1.5rem;}
#heading {text-align:center; white-space:no-wrap; font-size:1.5rem; background:#ADC1C9; color:#2E5363; display:inline; padding:0.75rem 2rem;
font-weight:bold; letter-spacing:2px; height:3.0rem; line-height:3.0rem; margin-top:1.5rem; border-radius:1rem; box-shadow: 3px 3px 6px rgba(0,0,0,0.3); }
/*#heading:hover {background:#BB8443;}*/
#heading a {background:inherit; color:#1F4244; text-decoration:none; text-shadow: 2px 2px 15px #60883E;}
#heading a:hover {background:inherit;}
#heading a img {vertical-align:middle; text-decoration:none; height:2.5rem; line-height:2.5rem; }
#print_image {margin-right: 1.5rem;}
#author {margin:2rem 0; font-size:1.5rem; font-weight:bold; color:#8E2800; text-decoration:none; text-align:right;}
#helper {display:table; margin:0rem auto; margin-top:-2rem; font-size:1.5rem; font-weight:bold; color:#1F4244 !important; text-decoration:none;}
.pusher {background:#FFB03B; color:#1F2936; opacity:0.8; padding:0.5rem; border-radius:0.25rem;}
summary {background:#D2F6E4; margin:0; margin-bottom:0.5rem; width:62rem !important; text-transform: uppercase; color:#465D51; font-size:1.5rem; letter-spacing:1px; font-weight:bold;}
details {background:#D2F6E4; margin:0rem 0; width:62rem !important; color:#17263F; padding:0.5rem;}
details p {text-align:justify; color:#332A23; margin:0.5rem; font-size:1.3rem}
h3 {margin-bottom:0rem; margin-left:1rem}
#docs {background:#D2F6E4; padding:1rem 2rem; margin-top:2rem; border-radius:1rem; font-weight:normal;}
#doc_button {background:#3E606F; color:beige !important; padding:0.6rem 1.5rem; border-radius:0.75rem; font-size:1.5rem; letter-spacing:1px; font-weight:bold; border:none; box-sizing:inherit; text-decoration: none; margin:1rem; float:none; cursor:pointer; display:inline-block; box-shadow: 3px 3px 6px rgba(0,0,0,0.3); text-shadow: 0px 2px 2px rgba(0,0,0,0.4);}
#doc_button:hover {background:#193D2A; color:#fff !important;}
.record {color:#3D1713}
.clearer {clear:left; }
.right {text-align:right}
.left {text-align:left}
.center {text-align:center}
.underline {text-decoration:underline}
.bold {font-weight:bold;}
.boxer {box-shadow: 3px 3px 6px rgba(0,0,0,0.3);}
.middot {margin:0 0.5rem}
pre {font-size:2rem !important}
a:link {text-decoration:none}
.btn {background: #3498db; background-image: linear-gradient(to bottom, #3498db, #2980b9); border-radius: 28px; font-family: Arial; color: #ffffff; font-size: 20px; padding: 10px 20px 10px 20px; text-decoration: none;}
.btn:hover {background: #3cb0fd; background-image: linear-gradient(to bottom, #3cb0fd, #3498db); text-decoration: none;}
/* -------SLICK CAROUSEL------- */
a:link.shark, a:visited.shark {border-bottom:2px dotted darkblue; color: white; font-weight:bold;}
.fixedElement {position: sticky; top: 0; z-index:1000000; background:black;}
.no_show {display:none}
#skyfall {}
#buffer {height:40rem}
input::placeholder {color: #3A3D2E;}
.level {text-transform: uppercase}
#titles tr td {padding:0.25rem 1.5rem}
.universal {margin-bottom: 1rem}<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://rawgit.com/Mathachew/jquery-autotab/master/js/jquery.autotab.min.js"></script>
<div class="container">
<div id="pairing" class="box" style="width:68rem;">
<div id="skyfall" class="box">
<div class="universal">
<div class="ui-widget glasnost">
<div class="cucumber">4</div>
<input type="text" id="P04" style="display:inline;" maxlength="25"
class="automplete-2 text person ui-autocomplete-input" autocomplete="off"> <span
class="arrow-right">⇾</span>
</div>
<div class="fee_input">
<div class="EF">EF $</div>
<input type="text" onblur="findTotalEF()" name="ef-fee" style="margin-right:1rem; width:1rem;"
class="number fee" maxlength="1" size="1"></div>
<div class="fee_input">
<div class="MEM">MEM $</div>
<input type="text" onblur="findTotalMem()" name="mem-fee" style="width:2rem;" class="number fee"
maxlength="2" size="2"></div>
<div class="fee_input">
<div class="EXP">EXP: <input type="text" id="X04" name="expires" class="number fee expDate"
maxlength="12"
size="12" disabled=""></div>
</div>
</div>
</div>
</div>
</div>