Jquery 更改div和元素类型文本比较_Jquery

Jquery 更改div和元素类型文本比较

jquery

Jquery 更改div和元素类型文本比较,jquery,Jquery,我有一个表单，它有一个选择菜单（a）和两个div（B和C）以及一个文本输入类型（D）。我想让选择菜单下拉菜单（A）的选择影响div B中显示的值。然后，当用户在文本元素D中输入值时，将该值与B中的值进行比较，C将输出（显示）该值是否大于或小于B中的值到目前为止，我一直在使用jquery blur函数，结果证明它是不一致的 $('.expCheck').blur(function() { var curr = $(this).val(); var prevField = par

我有一个表单，它有一个选择菜单（a）和两个div（B和C）以及一个文本输入类型（D）。我想让选择菜单下拉菜单（A）的选择影响div B中显示的值。然后，当用户在文本元素D中输入值时，将该值与B中的值进行比较，C将输出（显示）该值是否大于或小于B中的值

到目前为止，我一直在使用jquery blur函数，结果证明它是不一致的

$('.expCheck').blur(function() {
    var curr = $(this).val();
    var prevField = parseInt($(this).parent().prev('td').children('.getValue').text());
    var compField = $(this).parent().next('td').children('.compCheck');
    compField.css('background-color','#c00');

    if (curr < prevField) {
        compField.css('background-color','#c00').text('Failed');
    } else {
        compField.css('background-color','#0c0').text('Passed'); 
    }
});

$（'.expCheck'）.blur（函数（）{
var curr=$（this.val（）；
var prevField=parseInt（$（this）.parent（）.prev（'td'）.children（'.getValue'）.text（））；
var compField=$（this.parent（）.next（'td'）.children（'.compCheck'）；
css（'background-color'，'#c00'）；
如果（当前<当前字段）{
compField.css（'background-color'，'#c00'）。text（'Failed'）；
}否则{
compField.css（'background-color'，'#0c0'）。text（'Passed'）；
}
});

html结构

<form method="post" enctype="multipart/form-data" name="testForm" id="testForm" action="test_process.php">
    <select name="day_select" id="day_select" class="daychanger">
        <option value="0">--Please Select Days--</option>
        <option value="1">1- 7 Days</option>
        <option value="2">8-14 Days</option>
        <option value="3">15-21 Days</option>
    </select>

    <table class="mtbl">
        <tr class="head">
            <td width="297">&nbsp;</td>
            <td width="297">Required Days</td>
            <td width="246">Your Days</td>
            <td width="246">Status</td>
        </tr>
        <tr class="info'>
            <td>Days </td>
            <td>
                <div id="v1" class="getValue"></div>
            </td>
            <td align="left">
                <input class="expCheck" name="days" type="text" id="days" size="5"  maxlength="5" />
            </td>
            <td>
                <div class="compCheck"></div>
            </td>
        </tr>
    </table>
</form>


--请选择日期--
1-7天
8-14天
15-21天
所需天数
你的日子
地位
如果您不介意在键入时不断更新div c，那么可以使用.change（）事件，因为业务需求不够明确
“所需天数”列中有什么内容
为什么不将
控件放在该列中
是否应将用户的天数与范围进行比较，即介于1和7之间，或介于8和14之间，以此类推？（现在，逻辑只是根据最大值进行检查。）

每页总是只有一张表格吗
每个表单总是只有一行吗？如果是这样的话，代码可以简化一点。否则，需要调整逻辑和表单结构
不管怎样，根据目前问题的最佳猜测
请注意，HTML略有更改：修复了几个输入错误，并更改了
值以匹配业务逻辑
调整后的HTML为：
<form method="post" enctype="multipart/form-data" name="testForm" id="testForm" action="test_process.php">
    <select name="day_select" id="day_select" class="daychanger">
        <option value="0">--Please Select Days--</option>
        <option value="7">1- 7 Days</option>
        <option value="14">8-14 Days</option>
        <option value="21">15-21 Days</option>
    </select>
    <table class="mtbl">
        <tr class="head">
            <td width="297">&nbsp;</td>
            <td width="297">Required Days</td>
            <td width="246">Your Days</td>
            <td width="246">Status</td>
        </tr>
        <tr class="info">
            <td>Days</td>
            <td><div id="v1" class="getValue"></div></td>
            <td align="left"><input class="expCheck" name="days" type="text" id="days" size="5" maxlength="5"/></td>
            <td><div class="compCheck"></div></td>
        </tr>
    </table>
</form>

function updateStatus () {
    var maxReqDays  = parseInt ( $('#testForm table.mtbl tr.info div.getValue').text (), 10 );
    var minReqDays  = maxReqDays - 6;
    var userDays    = parseInt ( $('#days').val (), 10 );
    var statusNode  = $('#testForm > table.mtbl tr.info div.compCheck');

    if (userDays && maxReqDays) {
        if (userDays < maxReqDays) {
            statusNode.css ('background-color', '#c00').text ('Failed');
        } else {
            statusNode.css ('background-color', '#0c0').text ('Passed');
        }
    }
    else {
        statusNode.css ('background-color', '#ffc').text ('tbd');
    }
}

$("#day_select").change ( function () {
    var selectVal   = $(this).val ();
    if (selectVal == 0)
        selectVal   = '»select«';

    $('tr.info div.getValue').each ( function () { $(this).text (selectVal); } );
    updateStatus ();
} );

$('.expCheck').bind ('blur change keydown keyup mouseup', function () {
    updateStatus ();
} );

//--- Init the "Required days" cell.
$("#day_select").change ();


--请选择日期--
1-7天
8-14天
15-21天
所需天数
你的日子
地位
天



JS/jQuery是：
<form method="post" enctype="multipart/form-data" name="testForm" id="testForm" action="test_process.php">
    <select name="day_select" id="day_select" class="daychanger">
        <option value="0">--Please Select Days--</option>
        <option value="7">1- 7 Days</option>
        <option value="14">8-14 Days</option>
        <option value="21">15-21 Days</option>
    </select>
    <table class="mtbl">
        <tr class="head">
            <td width="297">&nbsp;</td>
            <td width="297">Required Days</td>
            <td width="246">Your Days</td>
            <td width="246">Status</td>
        </tr>
        <tr class="info">
            <td>Days</td>
            <td><div id="v1" class="getValue"></div></td>
            <td align="left"><input class="expCheck" name="days" type="text" id="days" size="5" maxlength="5"/></td>
            <td><div class="compCheck"></div></td>
        </tr>
    </table>
</form>

function updateStatus () {
    var maxReqDays  = parseInt ( $('#testForm table.mtbl tr.info div.getValue').text (), 10 );
    var minReqDays  = maxReqDays - 6;
    var userDays    = parseInt ( $('#days').val (), 10 );
    var statusNode  = $('#testForm > table.mtbl tr.info div.compCheck');

    if (userDays && maxReqDays) {
        if (userDays < maxReqDays) {
            statusNode.css ('background-color', '#c00').text ('Failed');
        } else {
            statusNode.css ('background-color', '#0c0').text ('Passed');
        }
    }
    else {
        statusNode.css ('background-color', '#ffc').text ('tbd');
    }
}

$("#day_select").change ( function () {
    var selectVal   = $(this).val ();
    if (selectVal == 0)
        selectVal   = '»select«';

    $('tr.info div.getValue').each ( function () { $(this).text (selectVal); } );
    updateStatus ();
} );

$('.expCheck').bind ('blur change keydown keyup mouseup', function () {
    updateStatus ();
} );

//--- Init the "Required days" cell.
$("#day_select").change ();

函数updateStatus（）{
var maxReqDays=parseInt（$（'#testForm table.mtbl tr.info div.getValue'）.text（），10）；
var minReqDays=maxReqDays-6；
var userDays=parseInt（$（'#days'）.val（），10）；
var statusNode=$（“#testForm>table.mtbl tr.info div.compCheck”）；
if（userDays&&maxReqDays）{
如果（用户天数
你可以不解释你的HTML结构，而是发布它吗？哎呀！我链接到了错误的版本。现在试试看。还要注意，我在上面的bind（）
代码中添加了keyup
事件。