更改點擊類的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

回答

相關問題