點擊動態元素JavaScript

JavaScript中的新手，已完成（沒有結果）研究我想要的內容，然後需要幫助來創建一個允許在點擊時對div生效的腳本。點擊動態元素JavaScript

<div id="Tests"> 
<div id="Test"> test 1</div> 
<div id="Test> test 2</div> 
</div>

當你點擊「測試1」爲例，它必須成爲藍色（例如），然後如果我點擊「測試2」中，格「測試1」恢復正常，在div「測試2「看到藍色背景。

Example GIF

編輯：感謝您的幫助，我的問題解決了！

來源

2015-10-08 ShoLee

'id'應該是唯一的 –

ID應該是每頁唯一的。 –

jQuery接受？ –

這應該工作！

var el = document.getElementById('group'); 
 
el.onclick = function(evt){ 
 
    var ex = document.getElementsByClassName('selected')[0]; 
 
    ex.className = ex.className.replace('selected' , ''); 
 
    evt.target.className = this.className + ' selected '; 
 
    }

div { 
 
    border : solid 1px #CCC; 
 
    padding : 3px; 
 
    margin : 3px; 
 
    } 
 
.selected { 
 
    border : solid 3px steelblue; 
 
    padding : 2px; 
 
}

<div id='group'> 
 
<div class='selected'>Line 1</div> 
 
<div class=''>Line 2</div> 
 
<div class=''>Line 3</div> 
 
<div class=''>Line 4</div> 
 
</div>

來源

2015-10-08 18:06:06 Anonymous0day

感謝您的幫助，我的問題解決了！ – ShoLee

太棒了。別客氣！ – Anonymous0day

這是一個小提琴，展示你想要什麼。

http://jsfiddle.net/gpv377h2/

HTML：

<div id="test1">test 1</div> 

<div id="test2">test 2</div>

JS：

var test1 = document.getElementById('test1'); 
test1.addEventListener('click', 
    function() { 
     this.style.background = 'blue'; 
    } 
); 

var test2 = document.getElementById('test2'); 
test2.addEventListener('click', 
    function() { 
     this.style.background = 'blue'; 
     test1.style.background = ''; 
    } 
);

來源

2015-10-08 18:00:43 AtheistP3ace

感謝您的幫助，我的問題已解決！ – ShoLee

首先，ids應該是唯一的，我換成你與class：

<div id="Tests"> 
    <div class="Test"> test 1</div> 
    <div class="Test"> test 2</div> 
</div>

現在爲類test中的所有元素添加一個偵聽器，並使該偵聽器取消選擇以前選定的任何元素，然後選擇當前元素。

JS溶液

var tests = document.getElementsByClassName('Test'); 
    for(var i = 0; i < tests.length; i++) { 
     tests[i].onclick = function() { 
      var oldSelection = document.getElementsByClassName('selected')[0]; 
      if(oldSelection) oldSelection.className.replace('selected',''); 
      this.className += " selected"; 
     } 
    }

Jquery的溶液：

$(document).on('click', '.Test', function(){ 
    $('.Test.selected').removeClass('selected'); 
    $(this).addClass('selected'); 
});

的CSS爲selected類：

.selected{ 
    border:1px solid blue; 
}

來源

2015-10-08 18:05:44

感謝您的幫助，我的問題解決了！ – ShoLee

點擊動態元素JavaScript

回答

相關問題