0

使用类与 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');

        }

        }

    }
4

2 回答 2

0

解释

class是保留关键字（供将来可能使用），因此不应将其用作对象属性（如someobject.reservedKeyword），因此className不应class用作 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;
}

查看prototypejs链接

解决方案

因此使用addClassName和。在您的代码中：removeClassNamehasClassName

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");
        }
    }
}

注意：在现代浏览器中，我们使用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")
于 2013-04-05T09:10:48.693 回答
0

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

如果您一直在分配$('something').class您所做的事情，特别是向该对象添加一个属性，则每次将其设置为该对象时，它将被替换，如果您创建一个引用相同元素的新对象，它将不具有该属性并且 - 当然 - 它不会与 HTML 元素的类相关联。

于 2013-04-05T09:17:15.000 回答