Question

我为我的朋友编写了一个整洁的日历功能。他有一张桌子，他希望弹出与所点击的日期（或单元格）相对应的事件列表。例如，如果他点击了当月第三天标记为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”，则使文本变为红色（并且还删除参数的那一部分，以便它不显示在实际的弹出窗口中。）

有更简单的方法吗？

Answer 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';
}

Answer 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>';
  }

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

2 个答案: