HTML

Question

HELP !! ....我无法动态访问用户输入的Input字段数据！

我是一名课程设计师，试图制作一个“匹配”活动（18个问题，18个混乱的可能答案），其中答案选择被动态划掉，逐个1当他们被学生“用完”时，无论何时他将所选择的字母（在本例中为“r”）键入输入字段。这是18场比赛中的1场的HTML :(提示：注意“id” - 属性）

HTML

<input title="Question 18 - type 'R' into this input field" 
    class="questions" maxlength="1" id="18" onblur="My_Blur_Fx(this);">   
</input>

<span class="r_as_selected, choices" id="r">  <!--I use the first class ('r_as_selected') in the J-Query example below, and the 2nd class ('choices') in the Javascript example below.-->
    [Choice] R. (**All this span should soon be crossed-out.**) 
</span>

我以为我可以通过“改变”事件来解决这个问题。但是，我的Javascript和我的J-Query似乎都无法做到，因为没有人可以动态访问用户的输入输入（PHP通常通过GET或POST访问的东西）。

J-查询

我的J-Query尝试动态访问此用户输入的输入...

$("input").change(function(){

    $("input"[value="r"])
        .add('.r_as_selected')
            .eq(1).css({'color': 'red', 'text-decoration': 'line-through'})
});

...失败了，因为虽然它可能会超出'#r'的答案选择，但是当它们输入任何内容时它也会将其删除....所以代码的[value='r']部分无法定位 JUST 某人键入'r'的字段。

的Javascript

我的Javascript - 尝试动态访问此用户输入的输入...

<script> 
    function My_Blur_Fx(x) {
        var userInput = document.getElementById(x).value;      
        var userChoices = document.getElementsByClassName("choices").id;

        var i;
        for(i = 0; i < 18; i++)
                { if (userChoices[i].attributes[1].value == userInput) {
                        /*Note: "attributes[1] is my way of accessing the 2nd attribute in the HTML span above, which is 'id="r"'*/ 
                    userChoices[i].style.textDecoration = "line-through";};
                };
    }
</script>

...也失败了，因为'Input'是一个“Element”，其“Value”被DOM定义为“NULL”，所以上面的第3行给出了一个错误。任何其他可能相关的DOM修饰符都不能代替.value（即.innerHTML / .nodeValue / .attributes）访问该用户输入的值。因此，似乎无法动态访问“输入”元素。。。。（任何建议...... J-Query，Javascript或其他？）

Answer 1

您不能使用属性选择器来匹配用户输入，它只匹配静态属性，而不匹配动态值。您可以使用.filter()搜索与选择器匹配且具有特定值的元素。

$("input").change(function() {
    $("input").filter(function() {
        return this.value == 'r';
    }).add(".r_as_selected")
        .eq(1).css({'color': 'red', 'text-decoration': 'line-through'});
});

MyBlurFx()中有几个问题。

document.getElementById(x).value将无效，因为x是元素，而不是其ID。您应该使用x.value。
document.getElementsByClassName("choices").id无效，因为getElementsByClassName()会返回NodeList，而不是单个元素，因此它没有id属性。但是您不需要ID，只需使用document.getElementsByClassName("choices")，因为for循环对元素进行操作，而不是ID。

Answer 2

可能存在多个错误，但我发现您的代码$("input"[value="r"])与$(undefined)相同。您必须改为使用$('input[value=\'r\']')。

如何在Javascript或J-Query中动态访问用户输入的输入字段数据

HTML

J-查询

的Javascript

2 个答案: