Как оформить элементы на основе первых трех символов?

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.

В любом случае, я хотел, чтобы у него был какой-то способ отмечать более важные события красным шрифтом. Я думал сделать это путем извлечения первых трех букв каждого аргумента и, если они были равны строке «красный», чтобы сделать текст красным (а также удалить эту часть аргумента, чтобы он не отображался в реальном всплывающем окне).

Есть ли более простой способ сделать это?

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