Question

使用class vs addClassName jscript是什么区别？

在for循环中，每当我向现有类添加一个类时，在每个循环周期之后都会向它添加一个新类。所以进入循环的条件每次都在改变。

当我使用class而不是addClassName时，一切都开始按原样运行。在每个反向会话之后，循环与条件匹配。

如何解释？

工作版本：

    for (var i = 0; i < fields.length; i++) //instead of .each
    {
            alert(0.5);
            alert(fields[i].className);


        if (fields[i].className == 'text' || fields[i].className == 'date' || fields[i].className == 'number' || fields[i].className == 'text error' || fields[i].className == 'date error' || fields[i].className == 'number error' || fields[i].className == 'text valid' || fields[i].className == 'date valid' || fields[i].className == 'number valid' || fields[i].className == 'text valid error' || fields[i].className == 'date valid error' || fields[i].className == 'number valid error' )
        {
        alert(0.3);

        var val = fields[i];        


        var classname = "";
        if(val.value.length <= 4) {
            classname = fields[i].className + " error";


            fields[i].class = classname;

            Effect.Shake(fields[i], { times:3 }, 50);
            errorString = 'Please complete all required fields.';

           alert(0.6);
           alert(val.value);
           alert(0.66);
           alert(fields[i].name);
           alert(val.value.class);
           //error++;
        }  


        else {

            classname = fields[i].className + " valid";
            fields[i].class = classname;
            alert(8.5);
           alert(val.value.class);

        }

        } 
        alert(8.8);
            alert(fields[i].class); 
    }

不工作的版本：

            for (var i = 0; i < fields.length; i++) //instead of .each
    {

        if (fields[i].className == 'text' || fields[i].className == 'date' ||      fields[i].className == 'number' || fields[i].className == 'text error' || fields[i].className == 'date error' || fields[i].className == 'number error' )
        {
        var val = fields[i];        



        if(val.value.length <= 4) {             
            fields[i].addClassName('error');

            Effect.Shake(fields[i], { times:3 }, 50);
            errorString = 'Please complete all required fields.';

            error++;
        } else {
            fields[i].addClassName('valid');

        }

        }

    }

Answer 1

说明

class是reserved keyword（以备将来可能使用），因此不应将其用作对象属性（例如someobject.reservedKeyword），因此className而不是class 1}}用作nnnnnn在你的问题的评论中指出。

在您的代码中，这不起作用：

fields[i].class = classname

......但是这个会

fields[i].className = classname

这是prototypejs addClassName

的源代码

function addClassName(element, className) {
    if (!(element = $(element))) return;

    if (!hasClassName(element, className))
      element.className += (element.className ? ' ' : '') + className;

    return element;
}

请参阅the prototypejs link

解决方案

因此请使用addClassName，removeClassName和hasClassName。在您的代码中：

for (var i = 0; i < fields.length; i++) {
    if(fields[i].hasClassName("text") || fields[i].hasClassName("number") || fields[i].hasClassName("date")) {
        if(fields[i].value.length<=4) {
            fields[i].addClassName("error");
            fields[i].removeClassName("valid");
            Effect.Shake(fields[i], { times:3 }, 50);
            errorString = 'Please complete all required fields.';
        }
        else {
            fields[i].addClassName("valid");
            fields[i].removeClassName("error");
        }
    }
}

注意：在modern browsers中，我们改为使用classList属性：

prototype.js                         | modern browsers
---------------------------------------------------------------------
element.hasClassName("someclass")    | element.classList.contains("someclass")
element.addClassName("someclass")    | element.classList.add("someclass")
element.removeClassName("someclass") | element.classList.remove("someclass")

Answer 2

addClassName是将类添加到HTML元素的prototypejs方法。

如果您已经分配给$('something').class，那么您所做的就是向该对象添加一个属性，每次将其设置为该对象时，如果您创建一个引用该对象的新对象，它将被替换。相同的元素它不具有该属性 - 当然 - 它不会绑定到HTML元素的类。

class vs addClassName jscript

2 个答案:

说明

解决方案