点击更改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类更改为“selected”。

然后，如果用户单击另一个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');