更改点击类的div

-1

看似简单的问题让我感到困惑......所有答案似乎只适用于JQuery。更改点击类的div

我正在用PHP生成表日历。

日历上的每一天都是一个tr > td > div它看起来像这样的时刻：当了div中的一个用户点击我要那个div的背景改变

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

它的CSS类被选中。

然后，如果用户点击另一个div，我希望该类更改为选中状态，并删除以前的类，以便在任何时候只能选择一个div。

目前我正在使用this.className='selected其中的作品除了可以选择多个div！

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

来源

2016-09-16 Jethro Hazelhurst

您需要取消选择所有其他，然后选择一个。添加一个类到你所有的div例子“day”然后做'$（'。day'）。removeClass（'selected'）;'然后添加选择到真正选择的div –

通过循环到div类添加事件侦听器，并添加另一个如果点击了，则选择“选中”类。否则，请删除“选定”类。 “选择”类将包含你的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);; 
}

来源

2016-09-16 09:41:03 codemax

感谢您的回答，我将尝试和凑齐一些东西...... –

只是在纯javascript中添加了一个代码示例 – codemax

代码示例非常棒，谢谢，现在就试试这个。 –

你的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" 
}

来源

2016-09-16 09:37:59

感谢您花时间回答！有没有办法做到没有jQuery类似的东西？添加和包括整个jQuery库的东西如此微不足道似乎矫枉过正。 –

好吧，我用javascript添加了解决方案 –

感谢您的回答亚历山大，我不得不挑选其他答案，虽然两者都很好！ –

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

来源

2016-09-16 09:43:46 Beginner

尽管这可能会回答这个问题，但最好包括为社区（和原始海报）提供的代码的解释，以更好地理解答案。另外，你是否尝试过这段代码？我不认为它工作得很好（似乎有一个或多个错误） – ochi

标准JavaScript：

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

或JQuery的：

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

来源

2016-09-16 09:45:06

谢谢你的回答 –

试试这个本地JavaScript

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

来源

2016-09-16 09:50:02 Beginner

谢谢，我试过了，但我需要其他选定的div'取消选择'，当我点击一个新的div 。 –

更改点击类的div

回答

相关问题