如何根据前三个字符设置元素样式？答案

【问题标题】：How to style elements based on first three characters?如何根据前三个字符设置元素样式？
【发布时间】：2011-08-14 07:23:29
【问题描述】：

我正在为我的朋友编写一个简洁的日历功能。他有一个表格，他希望弹出一个与单击的日期（或单元格）相对应的事件列表。例如，如果他在该月的第三天单击标有 3 的单元格，则会弹出该天的事件列表。

我已经走得很远了。这是我的javascript：

function calendar() {
 var items = calendar.arguments.length;
  for(i = 0;i < items; i++){
document.getElementById('popupdiv').innerHTML += "<li>"+calendar.arguments[i]+"</li>";
  }
 document.getElementById('popup').style.display="block";
 document.getElementById('hide').style.display="block";
}

这确实有效。当函数calendar()被调用时，参数/参数将成为事件，它们将被列为<li>s。

不管怎样，我想有某种方法让他用红色字体标记更重要的事件。我正在考虑通过检索每个参数的前三个字母来做到这一点，如果它们等于字符串“red”，则使文本变为红色（并删除参数的那部分，使其不显示在实际弹出窗口中）。

有更简单的方法吗？

【问题讨论】：

你不能只为重要的事件添加一个类，让它们按你喜欢的样式设置吗？

标签： javascript html for-loop

【解决方案1】：

您的活动需要更多信息。除了事件名称，添加一个类选项。传递一组事件项，可能是这样的：

var items = [
    { 'name': 'Birthday party', 'class': 'fun' },
    { 'name': 'Midterm', 'class': 'important' }
];

function calendar(items)
{
    var newItemsHtml = '';
    for (var i=0, j=items.length; i<j; i++)
    {
        newItemsHtml += '<li class="'+items[i].class+'">'+items[i].name+'</li>';
    }
    var targetList = document.getElementById('popupListNotADivTheyDoNotHaveListItems');
    targetList.innerHTML += newItemsHTML;
    document.getElementById('popup').style.display = 'block';
    document.getElementById('hide').style.display = 'block';

    // Better in jQuery:
    $('#popuplist').append(newItemsHtml);
    $('#popup').show();
    $('#hide').show();
}

不过，这需要数组知识。要完全按照您的要求进行操作，请尝试以下操作：

function calendar(){
    var items = calendar.arguments;
    for (item in items){
        var class = (item.substring(0,3) === 'red') ? ' class="red"' : '';
        var target = document.getElementById('popupdiv');
        target.innerHTML += '<li'+class+'>'+item+'</li>';
    }
    document.getElementById('popup').style.display = 'block';
    document.getElementById('hide').style.display = 'block';
}

去除项目名称中的“红色”：

function calendar(){
    var items = calendar.arguments;
    for (item in items){
        var class = '';
        if (item.substring(0,3) === 'red'){
            class = ' class="red"';
            item = item.substring(3);
        }
        var target = document.getElementById('popupdiv');
        target.innerHTML += '<li'+class+'>'+item+'</li>';
    }
    document.getElementById('popup').style.display = 'block';
    document.getElementById('hide').style.display = 'block';
}

【讨论】：

设置 var i=0, j=foo.length 是一个小的性能优化，不用担心。
哦...这看起来对我来说更容易理解，谢谢...但是有没有办法在插入之前从字符串的开头删除“红色”？编辑：此外，它决定现在而不是 6 分钟前显示您的评论......奇怪。
嗯...您的代码似乎有错误。它不再显示参数的实际文本，而是它们的索引（0、1、2 等）。有什么想法吗？
抱歉打扰了，这有点急……见上面的评论。

【解决方案2】：

定义一个类似的css类

li.red
{
color:red;
}
or
li.red{color:#ff0000;}
li.red{color:rgb(255,0,0);}

然后在你的 javascript 代码中

for(i = 0;i < items; i++){
document.getElementById('popupdiv').innerHTML += '<li class="'+(i<3?'red':'')+'">'+calendar.arguments[i]+'</li>';
  }

【讨论】：