动态元素JavaScript点击

Question

在JavaScript中，我做了(没有结果)关于我想要的东西的研究，然后我需要帮助有一个脚本，它允许在点击一个div时对它产生影响。

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

例如，当您单击"Test 1“时，它必须变成蓝色(例如)，然后如果我单击"Test 2"，div "Test 1”返回正常，div "Test 2“将看到蓝色背景。

例GIF

编辑:谢谢你的帮助，我的问题解决了！

Answer 1

这应该管用！

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>

​

Answer 2

这是一个显示你想要什么的小小提琴。

http://jsfiddle.net/gpv377h2/

HTML：

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

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

联署材料：

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 = '';
    }
);

Answer 3

首先，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;
 }