JQuery设置input框值问题：满足条件时无法显示内容

我看了你的代码，有几个小细节出错了，导致满足条件时touch输入框没法正常显示内容，咱们一步步来修正：

1. jQuery方法使用错误 #

你写的$('#touch').value('passed')是错的——jQuery设置输入框值的方法是val()，不是value()。其实你已经用原生JS获取了box元素，直接用box.value = 'passed'更直接，还不用依赖jQuery。

2. 输入值类型不匹配 #

输入框的value属性返回的是字符串类型，直接和数字比较会出问题（比如字符串"9"和"10"比较，会因为第一个字符9的ASCII码比1大，被判定为"9">"10"）。所以必须把输入值转换成数字再做比较。

3. 条件逻辑的优先级歧义 #

原条件里&&的优先级比||高，实际执行顺序可能和你预期的不一样。最好用括号把逻辑分组，避免歧义。

修正后的原生JS版本（不依赖jQuery） #

<input onchange="trigger()" required type="number" id="xcoord" name="xcoord">
<input onchange="trigger()" required type="number" id="ycoord" name="ycoord">
<input required type="text" id="touch" name="touch">

<script>
function trigger(){
    // 获取输入值并转为数字
    var xVal = Number(document.getElementById('xcoord').value);
    var yVal = Number(document.getElementById('ycoord').value);
    var box = document.getElementById('touch');

    // 用括号明确逻辑分组，保留你原有的条件逻辑
    if (xVal >= 325 || (xVal <= 300 && yVal >= 55) || yVal <= 25) {
        box.value = 'passed';
    } else {
        // 条件不满足时清空输入框，可选
        box.value = '';
    }
}
</script>

如果你要使用jQuery版本 #

记得先引入jQuery库，然后修正方法：

<input onchange="trigger()" required type="number" id="xcoord" name="xcoord">
<input onchange="trigger()" required type="number" id="ycoord" name="ycoord">
<input required type="text" id="touch" name="touch">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function trigger(){
    var xVal = Number($('#xcoord').val());
    var yVal = Number($('#ycoord').val());

    if (xVal >= 325 || (xVal <= 300 && yVal >= 55) || yVal <= 25) {
        $('#touch').val('passed');
    } else {
        $('#touch').val('');
    }
}
</script>

额外优化建议 #

可以加个判断，避免用户未输入时出现无效值：

function trigger(){
    var xInput = document.getElementById('xcoord');
    var yInput = document.getElementById('ycoord');
    var box = document.getElementById('touch');

    // 输入为空时直接清空结果框
    if (!xInput.value || !yInput.value) {
        box.value = '';
        return;
    }

    var xVal = Number(xInput.value);
    var yVal = Number(yInput.value);

    if (xVal >= 325 || (xVal <= 300 && yVal >= 55) || yVal <= 25) {
        box.value = 'passed';
    } else {
        box.value = '';
    }
}

内容的提问来源于stack exchange，提问作者Lop Duj