点击动态元素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

回答

相关问题