Question

在此示例中一起使用的.each和$(this).find等效的简单Javascript是什么？

$(document).ready(function(){

    $('.rows').each(function(){
        var textfield = $(this).find(".textfield");
        var colorbox = $(this).find(".box");

            function colorchange() {
                if (textfield.val() <100 || textfield.val() == null) {

                    colorbox.css("background-color","red");
                    colorbox.html("Too Low");
                    }

                else if (textfield.val() >300) {

                    colorbox.css("background-color","red");
                    colorbox.html("Too High");
                    }

                else {

                    colorbox.css("background-color","green");
                    colorbox.html("Just Right");
                    }
                }
            textfield.keyup(colorchange);
        }

)});

这基本上是我想要完成的事情，我知道我需要使用一个循环我只是不确定如何设置它。如果我不需要

，我不想仅仅为了这个简单的功能使用jquery

http://jsfiddle.net/8u5dj/

我删除了我已经尝试的代码，因为它改变了colorbox的每个实例，所以我不确定我做错了什么。

Answer 1

var rows = document.querySelectorAll('.rows');
for (var i=0; i<rows.length; i++) {
    var row = rows[i];
    var textfield = row.querySelector('.textfield');
    var colorbox = row.querySelector('.box');
    // ...
}

请注意，您必须使用for循环来迭代行，因为querySelectorAll() 不会返回数组，尽管有外观。特别是，这意味着.forEach()在返回的列表中无效。

Answer 2

这是如何在普通的javascript中执行您想要的操作：

http://jsfiddle.net/johnboker/6A5WS/4/

var rows = document.getElementsByClassName('rows');

for(var i = 0; i < rows.length; i++)
{
    var textfield = rows[i].getElementsByClassName('textfield')[0];
    var colorbox = rows[i].getElementsByClassName('box')[0];

    var colorchange = function(tf, cb)
    { 
        return  function() 
        {
            if (tf.value < 100 || tf.value == null) 
            {
                cb.style.backgroundColor = 'red';
                cb.innerText = "Too Low";
            }
            else if (tf.value > 300) 
            {
                cb.style.backgroundColor = 'red';
                cb.innerText = "Too High";
            }
            else 
            {
                cb.style.backgroundColor = 'green';
                cb.innerText = "Just Right";                    
            }               
        };
    }(textfield, colorbox);

    textfield.onkeyup = colorchange;    
}

什么是.each和$（this）的简单Javascript等价物，如同在这个例子中一起使用？

2 个答案: