点击更改div的类别

Question

看似简单的问题令我感到困惑...所有答案似乎仅适用于JQuery。

我正在用PHP生成表格日历。

日历上的每一天都是tr > td > div ，现在看起来像这样：

{cal_cell_content}
    <div class="" id="event" href="" onclick="this.className=\'selected\';return getDate({day});">
        {day}
    </div>
{/cal_cell_content}

当用户单击一个div时，我希望该div的背景将其CSS类更改为“选定”。

然后，如果用户单击另一个div，则我希望该类更改为selected，并且要删除上一个类，以便在任何时候都只能“选择”一个div。

目前，我正在使用this.className='selected ， 除了可以选择多个div之外，其他方法都有效！

如何获得行为，以便我可以选择一个div并突出显示它，然后如果我决定单击另一个div，则上一个div将被取消选择，而新的div被“选中”？

Answer 1

您的div具有相同的ID，这是错误的，请按照以下步骤操作

{cal_cell_content}
    <div class="event" href="">
        {day}
    </div>
{/cal_cell_content}


$('.event').click(function(){
   $('.event').removeClass('selected');
   $(this).addClass('selected');
});

使用javascript：

{cal_cell_content}
    <div class="event" href="" onclick="selectMe(this);">
        {day}
    </div>
{/cal_cell_content}

function selectMe(obj){
    var divs = document.getElementsByClassName("event");
    for(var i = 0; i < divs.length; i++)
    {
       divs[i].className = "event";
    }
    obj.className = "event selected"
}

Answer 2

通过循环将事件侦听器添加到div类，如果单击，则将另一个“ selected”类添加到div。 否则，请删除“选定”类。 “ selected”类将包含您的CSS内容。

例如，

var x = document.getElementsByClassName('yourClass')
for (var i = 0; i < x.length; i++) {
    x[i].addEventListener("click", function(){

    var selectedEl = document.querySelector(".selected");
    if(selectedEl){
        selectedEl.classList.remove("selected");
    }
    this.classList.add("selected");

    }, false);;
}

Answer 3

试试这个原生的JavaScript

document.getElementById('event').setAttribute('class', 'selected');

Answer 4

$('#event').click(function(){
   $(this).attr('class', 'selected');
});

Answer 5

在标准javascript中：

document.getElementById('foo').className += ' selected'

或在JQuery中：

$('#foo').addClass('selected');