javascript - 用 javascript 替换类值

Question

我想将 abcName 替换为 xyzName？

<tr>
    <td>
        <b class="abcName">Bob</b>
    </td>
</tr>

使用这个，但在页面加载时没有任何变化:

var bobo = document.getElementsByTagName("td");


function user(a, b, c) {
    try {
        if (bobo[c].innerHTML.match('>' + a)) {
            bobo[c].className = b;
        }
    } catch (e) {}
}


function customs() {
    for (i = 0; i < bobo.length; i++) {

        classChange("Bob", "xyzName", i);

    }
}
setInterval("customs()", 1000);

Answer 1

虽然我不确定您在间隔时间内所做的事情是否是最好的方法，但您可以:

var tidi = document.getElementsByTagName("td");

function changeStyleUser(a, b, c) {
    try {
        if (tidi[c].children[0].innerHTML.indexOf(a) === 0) {
            tidi[c].className = b;
        }
    } catch (e) {}
}


function customizefields() {
    for (i = 0; i < tidi.length; i++) {

        changeStyleUser("Bob", "xyzName", i);

    }
}
setInterval("customizefields()", 1000);

http://jsfiddle.net/zBmjb/

请注意，您的 for 循环中的函数名称也错误。

如果你使用 jQuery，这会简单得多。

编辑

使用 jQuery:

function customizefields(a) {
    $('td b').each(function(){
        if ($(this).text().indexOf(a) === 0) {
            this.className = 'xyzName';
        }
    });
}
setInterval(function(){customizefields('Bob')}, 1000);

http://jsfiddle.net/zBmjb/1/

另外，请注意在 setInterval() 中使用匿名函数而不是使用字符串。这允许您不使用eval()，which is considered expensive and potentially harmful .

编辑2

如果您想传递名称和类关联的列表，您可以使用带有对象的数组，如下所示:

function customizefields(arrNames) {
    $('td b').each(function(){
        for (var i = 0; i < arrNames.length; i++) {
            if ($(this).text().indexOf(arrNames[i].name) === 0) {
                this.className = arrNames[i].class;
            }
        }
    });
}
var namesToChange = [
    {'name':'Bob','class':'Bob'},
    {'name':'Bert','class':'Bert'},
    {'name':'Jeff','class':'Jeff'}
];
setInterval(function(){customizefields(namesToChange)}, 1000);

http://jsfiddle.net/zBmjb/4/

虽然感觉很困惑，因为它搜索所有选定的节点，然后对于每个找到的节点，循环遍历每个名​​称的当前节点以查找匹配的值，同时每秒执行一次。更简洁的方法是查看是否找到当前节点的名称值:

function customizefields(objNames) {
    $('td b').each(function(){
        name = $(this).text();
        if (name.indexOf(" ") != -1) {
            name = name.substring(0, name.indexOf(" "));
        }
        if (objNames[name]) {
            this.className = objNames[name];
        }
    });
}
var namesToChange = {
    'Bob':'Bob',
    'Bert':'Bert',
    'Jeff':'Jeff'
};
setInterval(function(){customizefields(namesToChange)}, 1000);

http://jsfiddle.net/zBmjb/5/

编辑3

如果您需要多个值，则可以将对象的值也设置为对象。

function customizefields(objNames) {
    $('td b').each(function(){
        name = $(this).text();
        if (name.indexOf(" ") != -1) {
            name = name.substring(0, name.indexOf(" "));
        }
        if (objNames[name]) {
            this.className = objNames[name].class;
            this.style.backgroundImage = "url(" + objNames[name].img + ")";
        }
    });
}
var namesToChange = {
    'Bob':{'class':'Bob','img':'bobspic.jpg'},
    'Bob':{'class':'Bert','img':'Bertphoto.jpg'},
    'Bob':{'class':'Jeff','img':'jeff.jpg'}
};
setInterval(function(){customizefields(namesToChange)}, 1000);