Изменить класс 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, чтобы изменить его класс css - 'selected'.

Затем, если пользователь нажимает на другой div, я хочу, чтобы этот класс изменился на выбранный и предыдущий класс был удален, так что только один div в любое время может быть «выбран».

В настоящее время я использую this.className='selected, который работает , за исключением нескольких divs.

Как получить поведение, чтобы я мог выбрать один div и выделить его, а затем, если я решит нажать другой div, предыдущий div будет отменен, а новый div будет выбран?

Answer 1

Добавить прослушиватель событий в класс сНа через петлю, и добавить еще класс «выбран» в div, если он щелкнут. В противном случае удалите класс «selected». Класс «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 2

Ваших дивы имеют одинаковый идентификатор, что это неправильно, сделай это как этот

{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 3

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

Answer 4

В стандартном JavaScript:

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

или в JQuery:

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

Answer 5

попробовать этот родной JavaScript

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