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

Question

帮助!!....我无法动态访问用户在 Input 字段中输入的数据!

我是一名类(class)设计者，试图进行“匹配”事件(18 个问题和 18 个打乱的可能答案)，其中答案选择会被动态地一一划掉，因为每当学生在输入字段中输入该选择的字母(在本例中为“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-Query

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

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

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

...失败是因为，虽然它可以划掉“#r”答案选择，但每当他们输入任何内容时它也会划掉它......所以 [value='r' ] 部分代码无法仅定位某人输入“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>

...也失败了，因为“输入”是一个“元素”，其“值”由 DOM 定义为“NULL”，...因此上面的第 3 行给出了错误。其他任何潜在相关的 DOM 修饰符也不能代替 .value(即 .innerHTML/.nodeValue/。属性)访问用户输入的值。所以看来“输入”元素无法动态访问。 。 。 。 (有什么建议...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() 中遇到了几个问题。

1. document.getElementById(x).value 不起作用，因为 x 是元素，而不是其 ID。您应该只使用x.value。
2. document.getElementsByClassName("choices").id 不起作用，因为 getElementsByClassName() 返回一个 NodeList，而不是单个元素，因此它没有 id 属性。但您不需要 ID，只需使用 document.getElementsByClassName("choices")，因为 for 循环作用于元素，而不是 ID。